Components

Star Rating

Display a star rating out of 5.0

Version

Basic examples

Sizes

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

`StarRatingV2` with inline text

<div className="flex">
  <StarRatingV2
    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 StarRatingV2 component. Providing onStarClick or onStarHover switches the component into its interactive mode.

function StarRatingExample() {
                    const [rating, setRating] = React.useState(3);
                    const [hoverRating, setHoverRating] = React.useState(undefined);

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

Props

StarRatingV2

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. Providing onStarClick or onStarHover switches the component into its interactive mode.

Type
(value: number) => void
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. Providing onStarClick or onStarHover switches the component into its interactive mode.

Type
(value: number) => void
onMouseLeave
Function that is called when a user mouses away from the StarRatingV2 component.

Type
() => void
accessibilityLabel
Overrides the auto-generated "{n} stars out of 5 star rating" label for assistive technologies. Useful for context-specific labels (e.g. "Rate this pro").

Type
string
name
Form name for the underlying radios when the component is interactive. Defaults to a unique per-instance value so multiple StarRatingV2s on the same page do not form a single shared radio group. Only set this for forms that need to coordinate with other inputs.

Type
string
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string