Rate
A rating indicates user interest in content.
Import
import { Rate } from 'rsuite';Examples
Basic
Rendering...
Sizes
The size of the rate component
Rendering...
Color
The color of the rate component
Rendering...
Half ratings
Rendering...
Vertical direction
Direction when half select
Rendering...
Hover feedback
Rendering...
Disabled and read only
Rendering...
Characters
You can use other icons, emoji, numbers, Chinese or other custom patterns
Rendering...
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
Rendering...
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';