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

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 ⭐ 10 ⭐
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'

Browser Support

Supports Chrome, firefox, safari, edge, and ie 9+. The star is SVG, so this library fails for any browser that doesn't support svg.