New Component: Star Ratings! ⭐

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:

ezgif.com-gif-maker

It is also possible to enable emoticons instead of stars:

ezgif.com-gif-maker (1)

10 Likes

This looks nice and could be very usefull :wink:

1 Like

Nice! Super useful :slight_smile:

1 Like

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

2 Likes

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

1 Like

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

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

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

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.

image

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

1 Like

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.

1 Like