React Ratings

React Ratings is a React rating component built with StyledComponents 💅

Installation

You can install rc-ratings component using the yarn or npm package manager:

yarn add rc-ratings
npm install rc-ratings

Dependencies

The rc-ratings component peer depends on the React library.

You can install React using yarn:

yarn add --save react react-dom

Usage

Import Rating Component

import Rating from "rc-ratings";

Start using it:

<Rating />

Pass some config props:

<Rating animateOnHover disableAnimation initialRate={3} stop={10} />

Properties

| Property | Type | Default | Description | | ------------------ | --------------- | ---------- | ---------------------------------------------------- | | animateOnHover | Boolean | false | Whether to animate rate hovering or not. | | disableAnimation | Boolean | false | Disable stars animation onClick or onHover. | | emptyRate | React Element | Empty Star | React Element | | fractions | Number | 1 | Number of equal parts that make up a whole symbol. | | fullRate | React Element | Full Star | React element | | initialRate | Number | 0 | Initial rate value. | | readonly | Boolean | false | Whether the rating can be modified or not. | | start | Number | 0 | Range starting value. | | step | Number | 1 | Step increment (must be between start and stop). | | stop | Number | 5 | Range stop value. |

Callbacks

| Callback | Type | Parameters | Description | | ---------- | ---------- | -------------------------------- | ----------------------------------------------------------------------------------------- | | onChange | Function | rate: Number | Called when the selected rate is changed. | | onClick | Function | (rate: Number, event: Event) | Called when a rate is clicked. | | onRate | Function | rate: Number or undefined | Called when a rate is entered or left. When a rate is left it is called with undefined. |