react-animated-rating

Basic Usage

import Rating from 'react-animated-rating';

<Rating />

Output:

Star Count

import Rating from 'react-animated-rating';

<Rating count={10} />

Output:

Stars Disabled

import Rating from 'react-animated-rating';

<Rating disabled />

Output:

Stars Filled

import Rating from 'react-animated-rating';

<Rating filled={5} />

Output:

Initial Bounce

import Rating from 'react-animated-rating';

<Rating filled={3} initialBounce={false} />

Output:

Without Animation

import Rating from 'react-animated-rating';

<Rating animation={false} />

Output:

Change Icon & Color

JSX

import Rating from 'react-animated-rating';

<Rating wrapperClassName="icon-red" icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 26"><path fill="none" strokeWidth="2px" d="M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z"/></svg>}/>

CSS

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

Output:

Star Size

import Rating from 'react-animated-rating';

<Rating size="2em"/> />

Note: Does not work if the property icon is set. Only works with the default star icon.

Output: