Extra Streamlit Components

[Mohamed]

Hey ,
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.

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)

[andfanilo]

Hello @Mohamed , welcome to the community

• 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

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

Cheers,
Fanilo