React Rating
Stars, for both jobs a rating has: collecting one and showing an average. The interactive mode previews on hover and commits on click; the read-only mode renders a precise fractional value, so a 4.3 average shows as 4.3 rather than a rounded-off four.
You rated: 3
Installation
Props
| Prop | Type | Description |
|---|---|---|
| value | number | Controlled rating |
| defaultValue | number | Initial rating (uncontrolled) |
| onChange | (value) => void | Fires on select |
| max | number | Number of stars (default 5) |
| readOnly | boolean | Display an average, no interaction |
| allowHalf | boolean | Half-star precision |
| count | number | Show a rating count after the stars |
Honest averages
The read-only mode is where most ratings actually live — a product with a 4.3 average and 1,284 reviews. Rounding that to four stars throws away real information, so each star fills to a fractional width: at 4.3 the fifth star is 30% filled, and the number beside it says 4.3. A rating UI that shows four flat stars for anything from 3.5 to 4.4 is quietly lying about the data.
Precise input
In interactive mode the stars preview on hover so the user sees their choice before committing, and with allowHalf the half a star is chosen by which side of the star the cursor is on — the interaction people already expect from every review form. Read-only or interactive, the same fractional fill logic drives the display, so the average you show and the rating you collect are rendered by exactly the same code.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.