# Rate

### [Demo](https://vant.bctc.io/?path=/story/rate--basic-usage)

#### Install

```
import React from 'react';
import { Rate } from 'vant-react';
```

## Usage

**Basic Usage**

```
<Rate currentRate={4} />
```

**Custom Icon**

```
<Rate currentRate={4} icon='like' voidIcon='like-o' />
```

**Custom Color**

```
<Rate currentRate={4} icon='like' voidIcon='like-o' color='#1989fa' />
```

#### Custom Count

```
<Rate
      count={10}
      currentRate={4}
      icon='like'
      voidIcon='like-o'
      color='#1989fa'
/>
```

**Disabled**

```
<Rate
      disabled
      currentRate={4}
      icon='like'
      voidIcon='like-o'
      color='#1989fa'
/>
```

**Read Only**

```
<Rate
      readonly
      currentRate={4}
      icon='like'
      voidIcon='like-o'
      color='#1989fa'
/>
```

**Custom Gutter**

```
<Rate
      gutter='8px'
      currentRate={4}
      icon='like'
      voidIcon='like-o'
      color='#1989fa'
/>
```

**Listen On Change**

```
const [currentRate, setRate] = useState(4);

<h1>{currentRate}</h1>
      
<Rate
        change={(rate) => setRate(rate)}
        currentRate={currentRate}
        icon='like'
        voidIcon='like-o'
        color='#1989fa'
/>
```

## API

**Props**

| Attribute       | Description                                   | Type          | Default | Required   |
| --------------- | --------------------------------------------- | ------------- | ------- | ---------- |
| `currentRate`   | Current rate                                  | ***number***  | -       | *optional* |
| `text`          | Count                                         | ***number***  | -       | *optional* |
| `size`          | Icon size                                     | ***string***  | -       | *optional* |
| `icon`          | Selected icon                                 | ***string***  | -       | *optional* |
| `gutter`        | Icon gutter                                   | ***string***  | -       | *optional* |
| `voidIcon`      | Void icon                                     | ***string***  | -       | *optional* |
| `*allowHalf`    | Whether to allow half star                    | ***boolean*** | `false` | *optional* |
| `readonly`      | Whether to be readonly                        | ***boolean*** | `false` | *optional* |
| `*touchable`    | Whether to allow select rate by touch gesture | ***boolean*** | `true`  | *optional* |
| `disabled`      | Whether to disable rate                       | ***boolean*** | `false` | *optional* |
| `color`         | Selected color                                | ***string***  | -       | *optional* |
| `voidColor`     | Void color                                    | ***string***  | -       | *optional* |
| `disabledColor` | Disabled color                                | ***string***  | -       | *optional* |

**Event**

| Event    | Description                 | Parameters     |
| -------- | --------------------------- | -------------- |
| `change` | Triggered when rate changed | *current rate* |