Rating
A rating component with customizable max value and half-value support
Value: 0
Installation
Props
| Prop | Type | Default |
|---|---|---|
value? | number | - |
max? | number | 5 |
hasHalves? | boolean | - |
readOnly? | boolean | - |
className? | string | - |
onChange? | ((value: number) => void) | - |
Examples
Form
Use the Rating component in a form to get the value of the rating.
Read-only
Use the Rating component in a read-only state to display the rating.
Styling
- To adjust the spacing between the stars, you will want to adjust the padding on the star, rather then the gap of the flex container. The reason for this is to avoid jittering the stars when hovering.
- To adjust the size or color of the stars, you will want to adjust the size of the star icon.