Rate

Demo

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