Rating: React
The Rating component provides a visually representation of a numerical assessment.
Installation
Before you can start using the @mediahuis/chameleon-react component, you'll need to install it, for more information check: Getting started for developers.
With that done, you're now ready to implement the component in your application.
import { Rating } from '@mediahuis/chameleon-react';
export default function Example() {
return <Rating value={4} label="Rating" />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
max | Number | 5 | No | The maximum value of the rating. |
min | Number | 0 | No | The minimum value of the rating. |
id | String | 'rating' | No | The step value of the rating. |
value | Number | - | No | The current value of the rating. |
emptyIcon | SVGType | Star | No | The icon to display when the rating is empty. |
emptyIconColor | ChameleonCssToken | 'var(--rating-foreground-empty-fill)' | No | The color of the empty icon. |
fullIcon | SVGType | StarFill | No | The icon to display when the rating is full. |
fullIconColor | ChameleonCssToken | 'var(--rating-foreground-full-fill)' | No | The color of the full icon. |
size | 'sm' | 'lg' | 'sm' | No | The size of the rating. |
precision | Number | 0.1 | No | The precision of the rating. |
label | ReactNode | - | No | Contents displayed within the PrimaryLabel. |
labelHidden | Boolean | false | No | Visually hide the label. (label is still recommended for a11y) |