@illa-design/rate v1.3.0

Rate

Rate component is used for input rate interactively.

Installation

yarn add @illa-design/rate

Import component

import { Rate } from "@illa-dedign/rate"

API

Rate Basic Properties

Rate Events

Example

Basic usage

<Rate />

Set default value

<Rate defaultValue={5}>

Set max score

<Rate defaultValue={5} count={10}>

Allow half selection

<Rate allowHalf>

Allow clear when click again

<Rate allowHalf allowClear>

Show score with heart icon

<Rate allowHalf allowClear heart>

Customize character of rate

function TextWrapper(props) {
  return (
    <div
      style={{
        width: 24,
        lineHeight: "24px",
        textAlign: "center",
        fontSize: 16,
        fontWeight: "bold",
      }}
    >
      {props.text}
    </div>
  )
}

<Rate
  style={{ display: "block", margin: "10px 0" }}
  defaultValue={3}
  character={<TextWrapper text="A" />}
/>