Awesome
React Awesome Stars Rating · 
React Awesome Stars Rating is a simple star component with easy integration for your React applications.
Table of Contents
Previews
Features
- Half stars
- Custom size and color
- Value shows with high precision
- Easy integration with Redux
- Accessibility
- SVG Icons
Installation
npm install react-awesome-stars-rating
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import ReactStarsRating from 'react-awesome-stars-rating';
const onChange = (value) => {
console.log(`React Stars Rating value is ${value}`);
};
const ReactStarsExample = ({ value }) => {
return <ReactStarsRating onChange={onChange} value={value} />;
};
ReactDOM.render(<ReactStarsExample />, document.getElementById('root'));
Documentation
| Name | Description | Type | Default |
|---|---|---|---|
| id | Identifier | String | ${Date.now()} |
| value | Value | Number | 0 |
| onChange | A function, that will be invoked when value have changed | Function | null |
| isEdit | If true the rating is in editing mode | Boolean | true |
| isHalf | If true half stars are available | Boolean | true |
| count | Count of the stars | Number | 5 |
| size | Size of the stars | Number | 25 |
| starGap | Gap between the stars | Number | 0 |
| className | Class name for button container | String | '' |
| primaryColor | Star's color when star is active | String | 'orange' |
| secondaryColor | Star's color when star isn't active | String | 'grey' |
| isArrowSubmit | Left arrow or right arrow click onvokes onChange | Boolean | false |
Examples
You can see live examples by below links: