Package: extra-streamlit-components-SEM
Extra-Streamlit-ComponentsAn all-in-one place, to find complex or just not available components by default on streamlit.Explained in details in my bookWeb Application Development with StreamlitComponentsFirstly, addimport extra_streamlit_components as stxRouterRoute 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 function decorator while initializing the Router object.@st.cache(allow_output_mutation=True,hash_funcs={"_thread.RLock":lambda_:None})definit_router():returnstx.Router({"/home":home,"/landing":landing})defhome():returnst.write("This is a home page")deflanding():returnst.write("This is the landing page")router=init_router()router.show_route_view()c1,c2,c3=st.columns(3)withc1:st.header("Current route")current_route=router.get_url_route()st.write(f"{current_route}")withc2:st.header("Set route")new_route=st.text_input("route")ifst.button("Route now!"):router.route(new_route)withc3:st.header("Session state")st.write(st.session_state)Cookie ManagerThe long awaited between-sessions in-browser cookies store and manager! It stores cookies in a strict same-site behaviour.To add an expiry date to a cookie use theexpires_atparameter in the set function. By default, it will expire after 1 day.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.importdatetimest.write("# Cookie Manager")@st.cache(allow_output_mutation=True)defget_manager():returnstx.CookieManager()cookie_manager=get_manager()st.subheader("All Cookies:")cookies=cookie_manager.get_all()st.write(cookies)c1,c2,c3=st.columns(3)withc1:st.subheader("Get Cookie:")cookie=st.text_input("Cookie",key="0")clicked=st.button("Get")ifclicked:value=cookie_manager.get(cookie=cookie)st.write(value)withc2:st.subheader("Set Cookie:")cookie=st.text_input("Cookie",key="1")val=st.text_input("Value")ifst.button("Add"):cookie_manager.set(cookie,val,expires_at=datetime.datetime(year=2022,month=2,day=2))withc3:st.subheader("Delete Cookie:")cookie=st.text_input("Cookie",key="2")ifst.button("Delete"):cookie_manager.delete(cookie)TabBarInspire from React'sScrollMenu, this component receives a list ofTabBarItemData, and returns theidof the
selected tabchosen_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=}")BouncingImageProbably 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.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)StepperBarA streamlit wrapper on MaterialUI's Stepperval=stx.stepper_bar(steps=["Ready","Get Set","Go"])st.info(f"Phase #{val}")