Search
Rate
Rate component.
When to use
Show evaluation.
A quick rating operation on something.
A quick rating operation on something.
Basic
The simplest usage.
Half star
Support select half star.
Show copywriting
Add copywriting in rate components.
Read only
Read only, can't use mouse to interact.
Clear star
Support set allow to clear star when click again.
Other Character
Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.
- AA
- AA
- AA
- AA
- AA
Customize character
Can customize each character using (RateProps) => ReactNode.
- 11
- 22
- 33
- 44
- 55
API
| Property | Description | Type | Default |
|---|---|---|---|
allowClear | Whether to allow clear when click again | boolean | true |
allowHalf | Whether to allow semi selection | boolean | false |
autoFocus | If get focus when component mounted | boolean | false |
character | The custom character of rate | ReactNode | (RateProps) => ReactNode | |
className | The custom class name of rate | string | - |
count | Star count | number | 5 |
defaultValue | The default value | number | 0 |
disabled | If read only, unable to interact | boolean | false |
style | The custom style object of rate | CSSProperties | - |
tooltips | Customize tooltip by each character | string[] | - |
value | The current value | number | - |
onBlur | Callback when component lose focus | function() | - |
onChange | Callback when select value | function(value: number) | - |
onFocus | Callback when component get focus | function() | - |
onHoverChange | Callback when hover item | function(value: number) | - |
onKeyDown | Callback when keydown on component | function(event) | - |
Methods
| Name | Description | Version |
|---|---|---|
blur() | Remove focus | |
focus() | Get focus |