Rate
A rating indicates user interest in content.
Import
import { Rate } from 'rsuite';
//or
import Rate from 'rsuite/Rate';Examples
Default
Sizes
The size of the rate component
Color
The color of the rate component
Half ratings
Vertical direction
Direction when half select
Hover feedback
Disabled and read only
Characters
You can use other icons, emoji, numbers, Chinese or other custom patterns
Customized rates
When there are multiple levels of rating, you can customize the character displayed at each level, but you need to implement this yourself
Accessibility
WAI tutorial: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating
Props
| Property | Type (Default) |
Description |
|---|---|---|
| allowHalf | boolean(false) |
Whether to support half option |
| character | ReactNode | custom character |
| cleanable | boolean(true) |
Whether clear is supported |
| defaultValue | number(0) |
Default value |
| disabled | boolean(false) |
Disabled，Cannot interact when value is true |
| max | number(5) |
Maximum score |
| renderCharacter | (value: number) => ReactNode | Customize the render character function |
| readOnly | boolean | Whether it is read-only, if true, no interaction is possible |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
Set component size |
| color | Color | A button can have different colors |
| value | number | Value (Controlled) |
| vertical | boolean(false) |
direction when half select |
| onChange | (value: number, event) => void | Callback function that changes value |
| onChangeActive | (value: number, event) => void | Callback function that is fired when the hover state changes. |
ts:Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';