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

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:

• Simple Example
• Integration with redux-form