# Extra-Streamlit-Components
[](https://static.pepy.tech/badge/extra-streamlit-components)
[](https://static.pepy.tech/badge/extra-streamlit-components/month)
[](https://static.pepy.tech/badge/extra-streamlit-components/week)
An all-in-one place, to find complex or just not available components by default on streamlit.
_Explained in details in my book [Web Application Development with Streamlit](https://amzn.to/3RQZiEa)_
<a href="https://amzn.to/3RQZiEa"><img src="https://raw.githubusercontent.com/mkhorasani/streamlit_authenticator_test/main/Web%20App%20Web%20Dev%20with%20Streamlit%20-%20Cover.png" width="200" height="300">
## Components
Firstly, add `import extra_streamlit_components as stx`
- ### Router
- 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.
```python
@st.cache_resource(hash_funcs={"_thread.RLock": lambda _: None})
def init_router():
return stx.Router({"/home": home, "/landing": landing})
def home():
return st.write("This is a home page")
def landing():
return st.write("This is the landing page")
router = init_router()
router.show_route_view()
c1, c2, c3 = st.columns(3)
with c1:
st.header("Current route")
current_route = router.get_url_route()
st.write(f"{current_route}")
with c2:
st.header("Set route")
new_route = st.text_input("route")
if st.button("Route now!"):
router.route(new_route)
with c3:
st.header("Session state")
st.write(st.session_state)
```
- ### Cookie Manager
A browser cookie store and manager.
Built on [universal-cookie](https://www.npmjs.com/package/universal-cookie#setname-value-options) with the capability of using its options
_**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._
```python
import datetime
st.write("# Cookie Manager")
@st.cache_resource
def get_manager():
return stx.CookieManager()
cookie_manager = get_manager()
st.subheader("All Cookies:")
cookies = cookie_manager.get_all()
st.write(cookies)
c1, c2, c3 = st.columns(3)
with c1:
st.subheader("Get Cookie:")
cookie = st.text_input("Cookie", key="0")
clicked = st.button("Get")
if clicked:
value = cookie_manager.get(cookie=cookie)
st.write(value)
with c2:
st.subheader("Set Cookie:")
cookie = st.text_input("Cookie", key="1")
val = st.text_input("Value")
if st.button("Add"):
cookie_manager.set(cookie, val) # Expires in a day by default
with c3:
st.subheader("Delete Cookie:")
cookie = st.text_input("Cookie", key="2")
if st.button("Delete"):
cookie_manager.delete(cookie)
```
- ### TabBar
Inspire from React's `ScrollMenu`, this component receives a list of `TabBarItemData`, and returns the `id` of the
selected tab
```python
chosen_id = stx.tab_bar(data=[
stx.TabBarItemData(id=1, title="ToDo", description="Tasks to take care of"),
stx.TabBarItemData(id=2, title="Done", description="Tasks taken care of"),
stx.TabBarItemData(id=3, title="Overdue", description="Tasks missed out"),
], default=1)
st.info(f"{chosen_id=}")
```
- ### BouncingImage
Probably not the best naming but this component, renders an image by its path or url, and animates by zooming in and
out repetitively giving an illusion of a bounce.
```python
image_url = "https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.svg"
stx.bouncing_image(image_source=image_url, animate=True, animation_time=1500, height=200, width=600)
```
- ### StepperBar
A streamlit wrapper on MaterialUI's Stepper
```python
val = stx.stepper_bar(steps=["Ready", "Get Set", "Go"])
st.info(f"Phase #{val}")
```
[](https://www.buymeacoffee.com/mohamed512)
Raw data
{
"_id": null,
"home_page": "https://github.com/Mohamed-512/Extra-Streamlit-Components",
"name": "extra-streamlit-components",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": "",
"keywords": "Python,Streamlit,React,JavaScript",
"author": "Mohamed Abdou",
"author_email": "matex512@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/16/a7/580b13af828ef38888196f8b2c03fa97afa89cdb7946438ca5f3271e9a81/extra_streamlit_components-0.1.71.tar.gz",
"platform": null,
"description": "# Extra-Streamlit-Components\n\n[](https://static.pepy.tech/badge/extra-streamlit-components) \n[](https://static.pepy.tech/badge/extra-streamlit-components/month) \n[](https://static.pepy.tech/badge/extra-streamlit-components/week) \n\nAn all-in-one place, to find complex or just not available components by default on streamlit.\n\n_Explained in details in my book [Web Application Development with Streamlit](https://amzn.to/3RQZiEa)_\n\n<a href=\"https://amzn.to/3RQZiEa\"><img src=\"https://raw.githubusercontent.com/mkhorasani/streamlit_authenticator_test/main/Web%20App%20Web%20Dev%20with%20Streamlit%20-%20Cover.png\" width=\"200\" height=\"300\"> \n\n\n## Components\n\nFirstly, add `import extra_streamlit_components as stx`\n\n- ### Router\n- 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.\n ```python\n @st.cache_resource(hash_funcs={\"_thread.RLock\": lambda _: None})\n def init_router():\n return stx.Router({\"/home\": home, \"/landing\": landing})\n\n def home():\n return st.write(\"This is a home page\")\n\n def landing():\n return st.write(\"This is the landing page\")\n\n router = init_router()\n router.show_route_view()\n\n c1, c2, c3 = st.columns(3)\n\n with c1:\n st.header(\"Current route\")\n current_route = router.get_url_route()\n st.write(f\"{current_route}\")\n with c2:\n st.header(\"Set route\")\n new_route = st.text_input(\"route\")\n if st.button(\"Route now!\"):\n router.route(new_route)\n with c3:\n st.header(\"Session state\")\n st.write(st.session_state)\n ```\n\n- ### Cookie Manager\n A browser cookie store and manager.\n Built on [universal-cookie](https://www.npmjs.com/package/universal-cookie#setname-value-options) with the capability of using its options \n\n _**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._\n\n ```python\n import datetime\n st.write(\"# Cookie Manager\")\n\n @st.cache_resource\n def get_manager():\n return stx.CookieManager()\n\n cookie_manager = get_manager()\n\n st.subheader(\"All Cookies:\")\n cookies = cookie_manager.get_all()\n st.write(cookies)\n\n c1, c2, c3 = st.columns(3)\n\n with c1:\n st.subheader(\"Get Cookie:\")\n cookie = st.text_input(\"Cookie\", key=\"0\")\n clicked = st.button(\"Get\")\n if clicked:\n value = cookie_manager.get(cookie=cookie)\n st.write(value)\n with c2:\n st.subheader(\"Set Cookie:\")\n cookie = st.text_input(\"Cookie\", key=\"1\")\n val = st.text_input(\"Value\")\n if st.button(\"Add\"):\n cookie_manager.set(cookie, val) # Expires in a day by default\n with c3:\n st.subheader(\"Delete Cookie:\")\n cookie = st.text_input(\"Cookie\", key=\"2\")\n if st.button(\"Delete\"):\n cookie_manager.delete(cookie)\n ```\n\n \n\n- ### TabBar\n Inspire from React's `ScrollMenu`, this component receives a list of `TabBarItemData`, and returns the `id` of the\n selected tab\n ```python\n chosen_id = stx.tab_bar(data=[\n stx.TabBarItemData(id=1, title=\"ToDo\", description=\"Tasks to take care of\"),\n stx.TabBarItemData(id=2, title=\"Done\", description=\"Tasks taken care of\"),\n stx.TabBarItemData(id=3, title=\"Overdue\", description=\"Tasks missed out\"),\n ], default=1)\n st.info(f\"{chosen_id=}\")\n ```\n\n \n\n- ### BouncingImage\n Probably not the best naming but this component, renders an image by its path or url, and animates by zooming in and\n out repetitively giving an illusion of a bounce.\n\n ```python\n image_url = \"https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.svg\"\n stx.bouncing_image(image_source=image_url, animate=True, animation_time=1500, height=200, width=600)\n ```\n \n\n- ### StepperBar\n A streamlit wrapper on MaterialUI's Stepper\n\n ```python\n val = stx.stepper_bar(steps=[\"Ready\", \"Get Set\", \"Go\"])\n st.info(f\"Phase #{val}\")\n ```\n \n\n\n\n[](https://www.buymeacoffee.com/mohamed512)\n\n\n",
"bugtrack_url": null,
"license": "",
"summary": "An all-in-one place, to find complex or just natively unavailable components on streamlit.",
"version": "0.1.71",
"project_urls": {
"Homepage": "https://github.com/Mohamed-512/Extra-Streamlit-Components"
},
"split_keywords": [
"python",
"streamlit",
"react",
"javascript"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "25571115e9b974478fac83ba9cd79def8b3770a91b7a9001c46a76491071f2fe",
"md5": "86c3dde0c21669747957da89fa805b17",
"sha256": "c8e6f98446adecd3002756362e50d0669693b7673afaa89cebfced6415cc6bd3"
},
"downloads": -1,
"filename": "extra_streamlit_components-0.1.71-py3-none-any.whl",
"has_sig": false,
"md5_digest": "86c3dde0c21669747957da89fa805b17",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 4858597,
"upload_time": "2024-03-12T23:30:47",
"upload_time_iso_8601": "2024-03-12T23:30:47.267371Z",
"url": "https://files.pythonhosted.org/packages/25/57/1115e9b974478fac83ba9cd79def8b3770a91b7a9001c46a76491071f2fe/extra_streamlit_components-0.1.71-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "16a7580b13af828ef38888196f8b2c03fa97afa89cdb7946438ca5f3271e9a81",
"md5": "c9bb24c9fb49490e051aa867cf0c2a87",
"sha256": "d18314cf2ed009f95641882b50aa3bdb11b6a0eb6403fb43dbc8af1722419617"
},
"downloads": -1,
"filename": "extra_streamlit_components-0.1.71.tar.gz",
"has_sig": false,
"md5_digest": "c9bb24c9fb49490e051aa867cf0c2a87",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 2250093,
"upload_time": "2024-03-12T23:30:50",
"upload_time_iso_8601": "2024-03-12T23:30:50.782749Z",
"url": "https://files.pythonhosted.org/packages/16/a7/580b13af828ef38888196f8b2c03fa97afa89cdb7946438ca5f3271e9a81/extra_streamlit_components-0.1.71.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-03-12 23:30:50",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Mohamed-512",
"github_project": "Extra-Streamlit-Components",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [],
"lcname": "extra-streamlit-components"
}
JSON
