React-star-rating-element NPM

React Star Rating Element

Customizable react star ratings. SVG stars that show aggregate star ratings to the hundreths decimal point.

Install

npm install --save react-star-rating-element

Demo Example Image

npm.io

Usage

import { StarRating } from 'react-star-rating-element';

function App() {
  const [rating, setRating] = useState(0);

  return (
    <div className="App">
      <div className="Wrapper">
        <StarRating
          ratingValue={rating}
          changeRating={setRating}
          starEmptyColor="#999999"
          starSpacing={10}
          starDimension={30}
        />
        <p className="Indicator">
          The rating is <span>{rating}</span>
        </p>
      </div>
    </div>
  );
}

export default App;

API

Prop	Type	Default	Description	Example
rating	string	''	Component's unique identification. Can be used when more than one star rating components are used	'rating'
ratingValue	number	0	The user's rating. Number of stars to highlight.	`3`
changeRating	function	()=>{}	Callback that will be passed the new rating a user selects
numberOfStars	number	5	The max number of stars to choose from or to display	`6`
starRatedColor	string	'#ff8039'	Color of stars that the user has rated	`black`
starEmptyColor	string	'#999999'	Color of stars that the use hasn't rated	`grey`
starDimension	number	'13'	The width and height of the star	`15 x 15`
starSpacing	number	'2'	The spacing between the stars	`10` :star: `10` :star:
svgIconPath	string	'M6.5 1.61803L7.48381 4.6459L7.59607 4.99139H7.95934H11.143L8.56737 6.86271L8.27348 7.07624L8.38573 7.42173L9.36955 10.4496L6.79389 8.57827L6.5 8.36475L6.20611 8.57827L3.63045 10.4496L4.61426 7.42173L4.72652 7.07624L4.43263 6.86271L1.85697 4.99139H5.04066H5.40393L5.51619 4.6459L6.5 1.61803Z'	Set a path that describes the svg shape	'M6.5 1.61803L7.48381 4.6459L7.59607 4.99139H7.95934H11.143L8.56737 6.86271L8.27348 7.07624L8.38573 7.42173L9.36955 10.4496L6.79389 8.57827L6.5 8.36475L6.20611 8.57827L3.63045 10.4496L4.61426 7.42173L4.72652 7.07624L4.43263 6.86271L1.85697 4.99139H5.04066H5.40393L5.51619 4.6459L6.5 1.61803Z'