React-awesome-stars-rating NPM

React Awesome Stars Rating ·

React Awesome Stars Rating is a simple star component with easy integration for your React applications.

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