Skip to content

⭐  Read-only Star Rating Component

Submitted by Gabriel Vidal

Summary

A read-only Star rating using htbuilder for Streamlit.

Functions

star_rating

Renders a read-only star rating component using htbuilder for Streamlit.

Parameters:

Name Type Description Default
rating float

A number in the range [0, 5] representing the rating to be displayed. It can include half values like 2.5, and will be rounded to the nearest half-integer.

 required
color str

The color of the stars. Defaults to gold ("#FFD700").

 '#FFD700'
Source code in src/streamlit_extras/star_rating/__init__.py 
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@extra
def star_rating(rating: float, color: str = "#FFD700"):
    """
    Renders a read-only star rating component using htbuilder for Streamlit.

    Args:
        rating (float): A number in the range [0, 5] representing the rating to be displayed. It can include half values like 2.5, and will be rounded to the nearest half-integer.
        color (str, optional): The color of the stars. Defaults to gold ("#FFD700").
    """

    # Sanitize the rating to ensure it stays within [0, 5]
    assert 0.0 <= rating <= 5.0, "Rating must be in the range [0, 5]"

    # Calculate the number of full stars, half stars, and empty stars
    full_stars = int(rating)
    half_star = 1 if rating - full_stars >= 0.5 else 0
    empty_stars = 5 - full_stars - half_star

    def render_star(star_type="full"):
        # Common style for stars
        star_style = styles(
            color=color if star_type != "empty" else "lightgrey",
            font_size=px(24),
            border_radius=px(5),
            # padding=px(2),
            margin_right=px(2),
            cursor="default",
            user_select="none",
        )

        # Star HTML
        star_html = span(style=star_style)("β˜…")

        # Apply half-star effect
        if star_type == "half":
            half_star_style = styles(
                position="absolute",
                left=px(0),
                width=px(12),
                overflow="hidden",
                color=color,
                user_select="none",
            )
            star_html = span(
                style=styles(
                    color="lightgrey",
                    font_size=px(24),
                    position="relative",
                    user_select="none",
                )
            )("β˜…", span(style=half_star_style)("β˜…"))

        return star_html

    # Create HTML content
    stars_html = (
        [render_star("full") for _ in range(full_stars)]
        + [render_star("half") for _ in range(half_star)]
        + [render_star("empty") for _ in range(empty_stars)]
    )

    html_content = "".join(map(str, stars_html))

    html(html_content, height=47, width=150)

Import:

from streamlit_extras.star_rating import star_rating # (1)!
  1. You should add this to the top of your .py file πŸ› 

Examples

example

def example():
    st.text("10/10 would watching")
    star_rating(5)