Thumbprint logo

Star Rating

Display a star rating out of 5.0

Basic examples

Sizes

<>
  <div>
    <StarRating rating={0} />
  </div>
  <div>
    <StarRating rating={2.5} />
  </div>
  <div>
    <StarRating rating={5} />
  </div>
  <div>
    <StarRating
      rating={0}
      size="medium"
    />
  </div>
  <div>
    <StarRating
      rating={2.5}
      size="medium"
    />
  </div>
  <div>
    <StarRating
      rating={5}
      size="medium"
    />
  </div>
  <div>
    <StarRating
      rating={0}
      size="large"
    />
  </div>
  <div>
    <StarRating
      rating={2.5}
      size="large"
    />
  </div>
  <div>
    <StarRating
      rating={5}
      size="large"
    />
  </div>
</>

StarRating with inline text
<div className="flex">
  <StarRating
    rating={2.7}
    size="large"
  />
  <span className="ml3 b">
    13 reviews
  </span>
</div>

Event listeners
The hoverRating, onStarClick, onStarHover, and onMouseLeave props make it possible to build an interactive StarRating component.
function StarRatingExample() {
                    const [rating, setRating] = React.useState(3);
                    const [hoverRating, setHoverRating] = React.useState(undefined);

                    return (
                        <StarRating
                            size="large"
                            rating={rating}
                            hoverRating={hoverRating}
                            onStarClick={value => {
                                setRating(value);
                                console.log(`StarRating: Clicked on ${value}`);
                            }}
                            onStarHover={value => {
                                setHoverRating(value);
                                console.log(`StarRating: Hovered over ${value}`);
                            }}
                            onMouseLeave={() => {
                                setHoverRating(undefined);
                                console.log('StarRating: onMouseLeave');
                            }}
                        />
                    );
                }

Props
StarRating
  • rating
    required
    Number from 0-5 at increments of 0.5. Numbers between these steps will be rounded.
    

    Type
    number
  • hoverRating
    Number from 0-5 at increments of 1. hoverRating trumps rating with respect to star
highlighting.
    

    Type
    0 | 1 | 2 | 3 | 4 | 5
    Default
    0
  • size
    The size of the component when rendered
    

    Type
    'small' | 'medium' | 'large'
    Default
    'small'
  • onStarClick
    Function that is called when a user clicks on a star. The function is supplied a single
parameter?: the value of the clicked star.
    

    Type
    (value: number) => void
    Default
    noop
  • onStarHover
    Function that is called when a user hovers over a star. The function is supplied a single
parameter?: the value of the hovered star.
    

    Type
    (value: number) => void
    Default
    noop
  • onMouseLeave
    Function that is called when a user mouses away from the StarRating component
    

    Type
    () => void
    Default
    noop