react-animated-rating

react-animated-rating is an animated rating React component.

Demo

See react-animated-rating in action.

Installation

yarn add react-animated-rating

OR

npm install react-animated-rating

Usage

Add Rating to your component:

import Rating from 'react-animated-rating';

<Rating />

Properties

| Property | Type | Default | Description | |--|--|--|--| | animation | boolean | true | Whether icon animation is enabled or not. | | count | number | 5 | Number of icons. | | disabled | boolean | false | Whether icon is disabled or not. | | filled | number | 0 | Number of filled icons. | | icon | ReactNode | - | Embed SVG element as a React node. | | initialBounce | boolean | true - when disabled is false; false - when disabled is true | Whether bounce animation onload is enabled or not. The default value is determined by the disabled prop. | | size | string | "1.5em" | Font size of the SVG icon (Default width = 1em and height = 1em. Therefore, if size = 1.5em, then width = 24px and height = 24px). Does not work if the property icon is set. Only works with the default star icon. | | wrapperClassName | string | - | Wrapper class for the Rating component. |

Callbacks

| Callback | Type | Description | |--|--|--| | onChange | function (value) {} | Returns the rating value when the icon is clicked. |

Change Icon Color

The CSS root variable --icon-color depicts the color of the SVG icon.

To change its color, specify the wrapperClassName and override the --icon-color variable as shown below.

JSX

import Rating from 'react-animated-rating';

<Rating wrapperClassName="icon-red" />

CSS

.icon-red { --icon-color: red; }