Rating
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A star-based rating display using Unicode star characters.
Import
import { Rating } from "~lib/data-display/rating";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
value | number | Yes | N/A | Rating (0 to scale) |
max | number | No | 5 | How many stars to draw |
scale | number | No | max | The most the rating can be, such as 10 |
precision | 1 | 0.5 | No | 1 | Fill to the nearest whole star, or the nearest half |
size | "sm" | "md" | "lg" | No | "md" | Text size |
showValue | boolean | No | false | Show numeric value |
Examples
Default (3 of 5)
Full Rating
Half Stars
Set precision={0.5} to fill the stars to the nearest half.
Out of Ten
When a rating is out of ten (or any other number), pass that as scale. The stars fill in
proportion, and showValue prints the rating out of ten, as people know it.
<Rating value={6.9} scale={10} precision={0.5} showValue />