react-awesome-stars-rating

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