# Rate

- Page: https://jiguang132.com/resources/arco-design/docs/rate
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Rate is used for scoring.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage of Rate.
- **Allow Half**: Specify `allowHalf` to support half selection.
- **With Text**: Use `Rate` with text description.
- **Read Only**: Specify `Rate` as read-only via `readonly`.
- **Allow Clear**: Specify `allowClear` to allow clearing of ratings. 指定 `allowClear` 来允许清除评分。
- **Custom Character**: Use `character` to customize the characters used in `Rate`.
- **Customize Count**: Create a score component of any total count by specifying `count`.
- **Smiley Icon**: Use `grading` to show score with smiley icons.
- **Tooltips**: Use `tooltips` to provide hint information for each rating when the mouse is hovering.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Rate

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|allowClear|Whether to allow clear when click again|boolean |`-`|
|allowHalf|Whether to allow half selection|boolean |`-`|
|disabled|Whether is disabled|boolean |`-`|
|grading|Whether to show score with smiley icon|boolean |`-`|
|readonly|Whether is readonly|boolean |`-`|
|count|Star count|number |`5`|
|defaultValue|To set default value|number |`-`|
|value|To set value|number |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|tooltips|Customize tooltip by each character|string[] |`-`|
|character|The custom character of rate|ReactNode \| ((index: number) => ReactNode) |`<IconStarFill />`|
|onChange|Callback when score is changed|(value: number) => void |`-`|
|onHoverChange|Callback when the score user hovered is changed|(value: number) => void |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt