React Awesome Stars Rating is a simple star component with easy integration for your React applications.
- Half stars
- Custom size and color
- Value shows with high precision
- Easy integration with Redux
- Accessibility
- SVG Icons
npm install react-awesome-stars-rating
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'));| 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 |
You can see live examples by below links:
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
