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; }