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
- Installation
- Usage
- Examples
- Documentation

Previews

!react-awesome-stars-rating preview

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

``javascript
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 ;
};

ReactDOM.render(, 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:

- Simple Example
- Integration with redux-form