extra-streamlit-components 0.1.46

An all-in-one place, to find complex or just natively unavailable components on streamlit.

Extra-Streamlit-Components

An all-in-one place, to find complex or just not available components by default on streamlit.

Components

Firstly, add import extra_streamlit_components as stx

• Cookie Manager

  The 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 the expires_at parameter in the set function. By default, it will expire after 1 day.

  import datetime
  cookie_manager = stx.CookieManager()
  
  st.subheader("All Cookies:")
  cookies = cookie_manager.get_all()
  st.write(cookies)
  
  c1, c2, c3 = st.beta_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)
        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_at=datetime.datetime(year=2022, month=2, day=2))
  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

  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.

  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

  val = stx.stepper_bar(steps=["Ready", "Get Set", "Go"])
  st.info(f"Phase #{val}")