Extra Streamlit Components

Show the Community!
#1

Hey :wave:t3:,
Since Streamlit supports limited amount of components out of the box, but is very developer friendly to develop new custom components, I have made pip package to further enhance Streamlit you can download it through pip3 install extra-streamlit-components.
I have added 2 components till now, but more can come in the near future. If you want you can make it better even faster by contributing to its open source code base on GitHub, just open a pull request and see it used by other hundreds of developers according to https://pepy.tech/project/extra-streamlit-components.

demo

Code for the displayed demo:

import streamlit as st
import extra_streamlit_components as stx

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=}")
image_urls = ["https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.svg",
              "https://streamlit.io/images/brand/streamlit-logo-secondary-lightmark-lighttext.png",
              "https://ruslanmv.com/assets/images/posts/2020-10-17-Web-Application-Classification/streamlit_logo.png", ]
stx.bouncing_image(image_source=image_urls[int(chosen_id) - 1], animate=True, animation_time=1500, height=200, width=600)
4 Likes
Conditional rendering in st.form
#2

Hello @Mohamed , welcome to the community :slight_smile:

  • This little GIF of a TabBar in the post looks super nice! Do you think you could add a GIF per component to the README on the Github part?
  • For good discoverability, could you add a description of each component inside your project into the Components tracker ? They could point to the same repo but I think a larger part of the community will get to your library if you describe “tab bar” and “bouncing image” in the wiki :wink:

I’ll be looking into it when I have some time :eyes:

Cheers,
Fanilo :balloon:

1 Like
#3

Hi @Mohamed - Great component package! Thanks for taking the time to building it.

I’m currently using the stepper_bar in place of a streamlit select_slider. I’m wondering… is it possible to program the stepper bar so that I can select any option at any time?

For example, in order to go from option 1 to option 3, the client needs to select option 2 first (i.e. 1 → 2 → 3). I would like the client to be able to go straight from 1 → 3. I understand I may be using it different than originally created, but if there was some sort of option to unlock or unblock the stepper requiring steps in numerical order, that would be really useful to me.

Thanks again!