1.2.0 • Published 7 months ago
react-animated-rating v1.2.0
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; }