New Component: Star Ratings! ⭐

[Tian]

Hello everyone,

I created a Streamlit implementation of the BaseUI Rating Component(https://baseweb.design/components/rating/).

GitHub: GitHub - flucas96/streamlit_star_rating: A Streamlit implementation of the BaseUI Rating component
PyPI: st-star-rating · PyPI
Example app: https://st-star-rating-component.streamlit.app/

Example:

It is also possible to enable emoticons instead of stars:

[TomJohn]

This looks nice and could be very usefull

[willhuang]

Nice! Super useful

[andfanilo]

Looks wonderful!
Definitely add it to the Components Tracker (Streamlit Components - Community Tracker) so we don’t lose track of it!

Have a nice day
Fanilo

[Shawn_Pereira]

Hi @Tian

I just tried your awesome component, and have a few observations and suggestions:

Observations:

1. I can put any number of stars via the parameter setting, but the same is not possible for emojis.

Suggestions:

1. allow the input of any icon (/small png/jpg…), so that customisation options increase.
2. rather than having different options for stars and emojis, just have an array of icon references, so that there is no restriction to the type of stars (or icon) and emojis only, and/or their number. I could then have… say… 7 options between thumbs up and thumbs down.
3. if the above is possible, then your component can also double up as an image selector. Further, if there is a parameter for orientation, your component can also be used in a narrow sidebar as an image selector.

Thanks for this component.

Cheers

[Kien]

it’s nice but I can not comeback with 0 star once gave a rating, can you fix this pls? Thank you so much

[Tian]

Hi Kien,

thanks for your feedback.

What behavior from the user sould set the starts back to zero? Where would the user click?

Kind regards

[Kien]

I used this to make an poll app where user can just leave an “no idea” vote, but once they hit a star, then they can not return to “no idea” even when they rerun

[Tian]

Hi,

sadly the BaseWeb Star Rating does not directly provide a way to deselect all starts.

As a workaround I added a reset button that can be activated by setting the parameter:

resetButton = True

Furthermore, the label of the button can be determined by using the paramter:

resetLabel = "<b>Some Label</b>"

Note: It is possible to use HTML tags in the label as they will be correctly interpreted.

You can download the new version by executing:

pip install st-star-rating==0.0.5

The changes should also be reflected in the demo soon:

Streamlit (st-star-rating-component.streamlit.app)

Best regards
Fabian

[Kien]

Thank you for your effort, I really appreciate that. A reset button can solve problem but not simple. I will try another way to redesign the user experience in stead.

[Max_Dunaevsky]

Great and in demand component! Thank you!
What is the best way to associate callback function with this widget? Tried with on_click attribute but no way. Need to create streamlit demo app with list of elements and possibility for user to leave feedback for each item. And would like to trigger storing feedback just after user clicked some star. I know, as a workaround, I could also add button for user like ‘send feedback’, but would like to have solution with single click for user.

[Tian]

Hi @Max_Dunaevsky

I am glad you like the component.

I have added the paramter “on_click”. You can provide a python function to the parameter. Everytime the components gets clicked and a value is returned the function will be executed.

Just update the python modul to version 0.0.6

st-star-rating · PyPI

def function_to_run_on_click(value):
    st.write(f"**{value}** stars!")

stars = st_star_rating(label, amount_of_stars, default_value, size, emoticons, read_only, dark_theme, resetButton=reset_btn, resetLabel=reset_label,
                           customCSS=css_custom, on_click=function_to_run_on_click, )

I also updated the example app.

[Max_Dunaevsky]

Much obliged, man!
For now, widget looks even more interactive and cool!

[Clemens]

@Tian
thanks for the great component!

I can initialize the component with a star rating (1-5) as the defaultvalue from a postgresql record when loading the streamlit app and use the changed value of the star component to make an update to this record in the postgresql table.

However i wonder how to bind this star component to my sidebar selectboxes in the same way as with text_area components.

Currently after loading the page the star component gets populated with the star rating of the record currently selected, but if i then switch to another record id the star component will not be updated.

[Oleksandr_Arsentiev]

Hi @Tian great component! is there a way to adjust the label font size?

[chripo]

If I set the label to empty (“”), then the highlighted star is cut off at the bottom when the mouse is over it
Here is a screenshot taken from the example app (st-star-rating-component.streamlit.app):

The same effect happens on the left side.

I fixed this for me with this:
customCSS = “ul li:first-child { margin-left: 6px; margin-bottom: 15px}”

Not nice. But seems to work for me.

[chripo]

One solution might be to use the customCSS option. Since the label will result in an h3 tag, you can set its font-size directly:
customCSS = “h3 { font-size: 4px; }”

[H_o_Nguy_n_Van]

How to change the color of star??

[Tian]

I dont think this is possible right now.

[chripo]

This gives red (FF0000) stars instead of yellow ones:

customCSS = “.ay::after { content: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%2235%22%20height%3D%2235%22%20viewBox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20d%3D%22M11%201.54816L13.1268%207.78053L13.2423%208.11905H13.6H20.4143L14.9132%2011.9714L14.6055%2012.1869L14.7268%2012.5424L16.8321%2018.7118L11.2868%2014.8285L11%2014.6277L10.7132%2014.8285L5.16792%2018.7118L7.27321%2012.5424L7.39454%2012.1869L7.08681%2011.9714L1.58566%208.11905H8.4H8.75769L8.87321%207.78053L11%201.54816Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22%23FF0000%22%0A%20%20%20%20%20%20%20%20stroke%3D%22%23FF0000%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);}”