react-animated-rating
react-animated-rating is an animated rating React component.
Demo
See react-animated-rating in action.
Installation
yarn add react-animated-ratingOR
npm install react-animated-ratingUsage
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; }