New Component: streamlit-ext, sync widgets' value with url

Published at Github

streamlit-ext

Streamlit widgets synce value with url ,download button which won’t cause rerun and some useful functions

Use widget from stramlit-ext just as streamlit and pass a unique key to it!

examples

import numpy as np
import pandas as pd

import streamlit as st
import streamlit_ext as ste

df = pd.DataFrame(np.random.rand(10, 5))


option = ste.selectbox(
    "A form will show up if you select less than 10",
    range(100),
    key="selectbox",
)

st.write("You selected:", option)

age = ste.slider("How old are you?", 0, 130, 25, key="slider1")
st.write("I'm ", age, "years old")

ste.download_button("Click to download data!", df, "YOUR_DF.xlsx")
ste.download_button("Click to download text!", b"text content", "YOUR_STRING.txt")

installation

pip install streamlit-ext

Usage

sync widgets’ value with urls

When widgets value changes, the url synced and if you open the url in new tab, every value keeped.

Just import widgets from streamlit_ext, and give a specific key argument to it!

import streamlit as st
import streamlit_ext as ste

from datetime import time, datetime, date

option = ste.selectbox(
    "How would you like to be contacted?",
    range(100),
    key="selectbox",
)

st.write("You selected:", option)

d = ste.date_input("When's your birthday", date(2019, 7, 6), key="date_input")
st.write("Your birthday is:", d)

t = ste.time_input("Set an alarm for", time(8, 45), key="time_input")
st.write("Alarm is set for", t)

Download button which won’t cause rerun

import streamlit as st
import streamlit_ext as ste

st.title('streamlit-ext')

ste.set_page_width("60em")

ste.download_button("Download", "Hello World".encode(), "hello.txt")

Set page width

import streamlit as st
import streamlit_ext as ste

st.title('streamlit-ext')

ste.set_page_width("60em")

st.write("a quick fox jump..."*100)
4 Likes

Great job!

Feel free to add it to the Components Tracker: Streamlit Components - Community Tracker so we don’t lose track of it!

Have a nice day,
Fanilo

@johnlyu Thank you very much for sharing this great component. You have solved our biggest problem about saving user selection between pages. Absolutely Brilliant !!! :star_struck:

Hey, the extension looks great.
Any idea how to implement it in multipage apps?
I have a pipeline that has to go through pages 1, 2, 3 and page 4
page 4 shows plots with a lot of settings and widgets that i would love to sync between sessions/users through the url

any idea how i can keep the parameters throughout pages 1-3 even though the relevant widgets only initialize on page 4?

I think it is a bug with streamlit itself and I have reported to them at

Hi @johnlyu , does this not work for a Streamlit button?

I am getting an error,
AttributeError: module ‘streamlit_ext’ has no attribute ‘button’

It doesn’t. Button is not something with value stored.

If you store the button’s value it will never released.

Hi @johnlyu this is just what I was looking for. After installing this, I’m trying to embedd the app with different values in multiple pages on my website. But, the /?embed=True doesn’t seem to work with this package. Is there a workaround?.

The intended functionality is that I want to embed the same app in multiple locations on my website with the url value defined to fit the context of that particular page.