react-star-ratings-component

React-Star-Rating-Component

React-Star-Rating-Component is a simple to use yet completely customizable component for using Rating/Reviews.

• Fully CSS customizable - Change number of star, color, size and space between star ratings

Installation

This requires [React.js and Prop-Types] to run.

npm i react-star-ratings-component

Demo

Sandbox link to Play with

How to Use

Install and import react-star-ratings-component and pass the props as per the below table

import React from "react";
import ReactStarRating from "react-star-ratings-component";

const App = () => {
  return (
    <ReactStarRating
      numberOfStar={10}
      numberOfSelectedStar={2}
      colorFilledStar="red"
      colorEmptyStar="black"
      starSize="20px"
      spaceBetweenStar="10px"
      disableOnSelect={false}
      onSelectStar={val => {
        console.log(val);
      }}
    />
  );
};
export default App;

Prop-Types

Details of the Props to be passed:

Prop-name	Type	Description
numberOfStar	Number	This determines the maximum number of Stars or Rating in the Component.
numberOfSelectedStar	Number	This determines the number of Stars or Rating selected in the Component.
numberOfStar	Number	This determines the maximum number of Stars or Rating in the Component.
colorFilledStar	string	Color of selected Stars or Rating.
colorEmptyStar	string	Color of Stars or Rating.
starSize	string	This determines the size of the Star or Rating.
colorEmptyStar	string	This determines the space between the Star or Rating.
disableOnSelect	boolean	Disable or enable the user action in the component.
onSelectStar	func	Callback function which returns the position of nth star on click of the component

Default proptypes

ReactStarRating.defaultProps = {
  numberOfStar: 5,
  colorFilledStar: "orange",
  colorEmptyStar: "#000",
  starSize: "20px",
  spaceBetweenStar: "10px",
  disableOnSelect: true
};