React Awesome Stars Rating · GitHub license npm version Build Status codecov

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

Table of Contents

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

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: