Home

Awesome

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

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

NameDescriptionTypeDefault
idIdentifierString${Date.now()}
valueValueNumber0
onChangeA function, that will be invoked when value have changedFunctionnull
isEditIf true the rating is in editing modeBooleantrue
isHalfIf true half stars are availableBooleantrue
countCount of the starsNumber5
sizeSize of the starsNumber25
starGapGap between the starsNumber0
classNameClass name for button containerString''
primaryColorStar's color when star is activeString'orange'
secondaryColorStar's color when star isn't activeString'grey'
isArrowSubmitLeft arrow or right arrow click onvokes onChangeBooleanfalse

Examples

You can see live examples by below links: