12 |
13 |
14 | ## Components
15 |
16 | Firstly, add `import extra_streamlit_components as stx`
17 |
18 | - ### Router
19 | - Route to specific pages in Streamlit. This leverages the use of query parameters to make custom routes in your Streamlit application. For best experience, make sure to include the st.cache_resource function decorator while initializing the Router object.
20 | ```python
21 | @st.cache_resource(hash_funcs={"_thread.RLock": lambda _: None})
22 | def init_router():
23 | return stx.Router({"/home": home, "/landing": landing})
24 |
25 | def home():
26 | return st.write("This is a home page")
27 |
28 | def landing():
29 | return st.write("This is the landing page")
30 |
31 | router = init_router()
32 | router.show_route_view()
33 |
34 | c1, c2, c3 = st.columns(3)
35 |
36 | with c1:
37 | st.header("Current route")
38 | current_route = router.get_url_route()
39 | st.write(f"{current_route}")
40 | with c2:
41 | st.header("Set route")
42 | new_route = st.text_input("route")
43 | if st.button("Route now!"):
44 | router.route(new_route)
45 | with c3:
46 | st.header("Session state")
47 | st.write(st.session_state)
48 | ```
49 |
50 | - ### Cookie Manager
51 | A browser cookie store and manager.
52 | Built on [universal-cookie](https://www.npmjs.com/package/universal-cookie#setname-value-options) with the capability of using its options
53 |
54 | _**Security Note:** In shared domains such as share.streamlit.io, other web developers can have access to the cookies you set and the same goes for you. This is not to be treaded as security bug but a circumstance the developer need to be aware of._
55 |
56 | ```python
57 | import datetime
58 | st.write("# Cookie Manager")
59 |
60 | @st.fragment
61 | def get_manager():
62 | return stx.CookieManager()
63 |
64 | cookie_manager = get_manager()
65 |
66 | st.subheader("All Cookies:")
67 | cookies = cookie_manager.get_all()
68 | st.write(cookies)
69 |
70 | c1, c2, c3 = st.columns(3)
71 |
72 | with c1:
73 | st.subheader("Get Cookie:")
74 | cookie = st.text_input("Cookie", key="0")
75 | clicked = st.button("Get")
76 | if clicked:
77 | value = cookie_manager.get(cookie=cookie)
78 | st.write(value)
79 | with c2:
80 | st.subheader("Set Cookie:")
81 | cookie = st.text_input("Cookie", key="1")
82 | val = st.text_input("Value")
83 | if st.button("Add"):
84 | cookie_manager.set(cookie, val) # Expires in a day by default
85 | with c3:
86 | st.subheader("Delete Cookie:")
87 | cookie = st.text_input("Cookie", key="2")
88 | if st.button("Delete"):
89 | cookie_manager.delete(cookie)
90 | ```
91 |
92 | 
93 |
94 | - ### TabBar
95 | Inspire from React's `ScrollMenu`, this component receives a list of `TabBarItemData`, and returns the `id` of the
96 | selected tab
97 | ```python
98 | chosen_id = stx.tab_bar(data=[
99 | stx.TabBarItemData(id=1, title="ToDo", description="Tasks to take care of"),
100 | stx.TabBarItemData(id=2, title="Done", description="Tasks taken care of"),
101 | stx.TabBarItemData(id=3, title="Overdue", description="Tasks missed out"),
102 | ], default=1)
103 | st.info(f"{chosen_id=}")
104 | ```
105 |
106 | 
107 |
108 | - ### BouncingImage
109 | Probably not the best naming but this component, renders an image by its path or url, and animates by zooming in and
110 | out repetitively giving an illusion of a bounce.
111 |
112 | ```python
113 | image_url = "https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.svg"
114 | stx.bouncing_image(image_source=image_url, animate=True, animation_time=1500, height=200, width=600)
115 | ```
116 | 
117 |
118 | - ### StepperBar
119 | A streamlit wrapper on MaterialUI's Stepper
120 |
121 | ```python
122 | val = stx.stepper_bar(steps=["Ready", "Get Set", "Go"])
123 | st.info(f"Phase #{val}")
124 | ```
125 | 
126 |
127 |
128 |
129 | [](https://www.buymeacoffee.com/mohamed512)
130 |
--------------------------------------------------------------------------------
/build.py:
--------------------------------------------------------------------------------
1 | import os
2 |
3 | modules = os.listdir("extra_streamlit_components")
4 |
5 | for module in modules:
6 | path = os.path.join("extra_streamlit_components", module, "frontend")
7 | if os.path.exists(path):
8 | print(f"Preparing {path}")
9 | os.system(f"cd {path} && npm i && npm run build")
10 |
--------------------------------------------------------------------------------
/extra_streamlit_components/BouncingImage/__init__.py:
--------------------------------------------------------------------------------
1 | import os
2 | import streamlit.components.v1 as components
3 |
4 | from extra_streamlit_components import IS_RELEASE
5 |
6 | if IS_RELEASE:
7 | absolute_path = os.path.dirname(os.path.abspath(__file__))
8 | build_path = os.path.join(absolute_path, "frontend/build")
9 | _component_func = components.declare_component("bouncing_image", path=build_path)
10 | else:
11 | _component_func = components.declare_component("bouncing_image", url="http://localhost:3001")
12 |
13 |
14 | def bouncing_image(image_source: str, animate: bool, animation_time: int,
15 | height: float, width: float):
16 | _component_func(image=image_source, animate=animate, animation_time=animation_time,
17 | height=height, width=width)
18 |
--------------------------------------------------------------------------------
/extra_streamlit_components/BouncingImage/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bouncing_image",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@material-ui/core": "^4.11.4",
7 | "@testing-library/jest-dom": "^4.2.4",
8 | "@testing-library/react": "^9.3.2",
9 | "@testing-library/user-event": "^7.1.2",
10 | "@types/jest": "^24.0.0",
11 | "@types/node": "^12.0.0",
12 | "@types/react": "^16.9.0",
13 | "@types/react-dom": "^16.9.0",
14 | "material-ui": "^0.20.2",
15 | "react": "^16.13.1",
16 | "react-dom": "^16.13.1",
17 | "react-horizontal-scrolling-menu": "^0.7.10",
18 | "react-scripts": "3.4.1",
19 | "streamlit-component-lib": "^1.2.0",
20 | "typescript": "~3.7.2"
21 | },
22 | "scripts": {
23 | "start": "react-scripts start",
24 | "build": "react-scripts build",
25 | "test": "react-scripts test",
26 | "eject": "react-scripts eject"
27 | },
28 | "eslintConfig": {
29 | "extends": "react-app"
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | },
43 | "homepage": "."
44 | }
45 |
--------------------------------------------------------------------------------
/extra_streamlit_components/BouncingImage/frontend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {label}
115 |