DOCSEARCHbyAlgolia
Submit Docs

extra-streamlit-components

repository·master·Indexed 20 days ago

https://github.com/mohamed-512/extra-streamlit-components

A collection of advanced UI components for Streamlit, including a Router for custom page routing via query parameters, CookieManager for browser cookie management, TabBar for scrollable menus, StepperBar for visualizing process progression, and a bouncing_image component for animated images.

Tokens
2.4K
Snippets
10
Records
10
Agent score
19%

What's inside extra-streamlit-components

  2. Display an animated BouncingImage

    master

    The bouncing_image component renders an image (via path or URL) and applies a repetitive zoom animation to create a 'bounce' effect.

    Parameters:

    • image_source: The URL or path to the image.
    • animate: Boolean to enable/disable animation.
    • animation_time: Duration of the animation cycle in milliseconds.
    • height: Height of the image.
    • width: Width of the image.
    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)

  4. Use the Router component for custom page routing

    master

    The Router component allows you to route to specific pages in your Streamlit application by leveraging query parameters.

    Best Practice: When initializing the Router object, use the @st.cache_resource decorator with a custom hash_funcs for _thread.RLock to ensure stability.

    Key methods:

    • stx.Router(routes_dict): Initializes the router with a dictionary mapping paths (e.g., "/home") to view functions.
    • router.show_route_view(): Displays the view associated with the current route.
    • router.get_url_route(): Returns the current route string.
    • router.route(new_route): Navigates to a new route.
    @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()

# To navigate:
router.route("/landing")

# To get current route:
current_route = router.get_url_route()

  5. Use the TabBar component

    master

    The TabBar component displays a scrollable menu of tabs. It accepts a list of stx.TabBarItemData objects and returns the id of the currently selected tab.

    stx.TabBarItemData parameters:

    • id: A unique identifier for the tab.
    • title: The display text for the tab.
    • description: Additional text describing the 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)

  6. Manage browser cookies with CookieManager

    master

    The CookieManager component provides a way to store and manage browser cookies. It is built on universal-cookie.

    Security Note: In shared domains like share.streamlit.io, other developers may have access to the cookies you set. Do not use this for sensitive security-critical data in shared environments.

    Key methods:

    • stx.CookieManager(): Initializes the manager. It is recommended to wrap this in a @st.fragment or similar to manage state effectively.
    • cookie_manager.get_all(): Returns a dictionary of all available cookies.
    • cookie_manager.get(cookie=name): Retrieves the value of a specific cookie.
    • cookie_manager.set(name, value): Sets a cookie (expires in one day by default).
    • cookie_manager.delete(name): Deletes a specific cookie.
    @st.fragment
def get_manager():
    return stx.CookieManager()

cookie_manager = get_manager()

# Set a cookie
cookie_manager.set("my_cookie", "my_value")

# Get a cookie
val = cookie_manager.get(cookie="my_cookie")

# Delete a cookie
cookie_manager.delete("my_cookie")

# Get all cookies
all_cookies = cookie_manager.get_all()

  7. Create a navigation tab bar with tab_bar

    master

    The stx.tab_bar component creates a visual navigation bar. It returns the ID of the selected item.

    Parameters:

    • data: A list of stx.TabBarItemData objects. Each object requires an id and a title. You can optionally provide a description.
    • default: The ID of the item that should be selected by default.
    • return_type: The type of the returned ID (e.g., int).
    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,
    return_type=int,
)

  8. Display a bouncing image with bouncing_image

    master

    Use stx.bouncing_image to display an animated image that bounces within its container.

    Parameters:

    • image_source: The URL or path to the image.
    • animate: Boolean to enable/disable animation.
    • animation_time: Duration of the animation cycle in milliseconds.
    • height: Height of the image.
    • width: Width of the image.
    import extra_streamlit_components as stx

image_url = "https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.svg"
stx.bouncing_image(
    image_source=image_url, 
    animate=True, 
    animation_time=2000, 
    height=145, 
    width=500
)

  9. Implement a progress stepper with stepper_bar

    master

    The stx.stepper_bar component displays a sequence of steps, useful for multi-stage processes or wizards.

    Parameters:

    • steps: A list of strings representing the names of the steps.
    • is_vertical: Boolean. If True, the stepper is oriented vertically; otherwise, it is horizontal.
    • lock_sequence: Boolean. If True, prevents users from skipping steps (behavior depends on implementation context).

    Returns the index/value of the current active step.

    import extra_streamlit_components as stx

val = stx.stepper_bar(
    steps=["Ready", "Get Set", "Go"],
    is_vertical=False,
    lock_sequence=True
)

  10. Implement client-side routing with Router

    master

    The stx.Router component allows you to manage application routes and views based on the URL.

    To use it:

    1. Initialize the Router with a dictionary mapping URL paths to functions (e.g., {"/home": home_func}).
    2. Use router.show_route_view() to render the component.
    3. Use router.get_url_route() to retrieve the current active route.
    4. Use router.route(new_path) to programmatically navigate to a new route.

    Note: It is recommended to wrap the initialization in st.cache_resource to prevent re-initialization on every rerun.

    import streamlit as st
import extra_streamlit_components as stx

@st.cache_resource(hash_funcs={"_thread.RLock": lambda _: None})
def init_router():
    return stx.Router({"/home": home, "/landing": landing})

def home():
    st.write("This is a home page")

def landing():
    st.write("This is the landing page")

router = init_router()
router.show_route_view()

# Navigation example
if st.button("Go to Landing"):
    router.route("/landing")

# Get current route
current_route = router.get_url_route()