varshil-shah / reactjs-star-rating

Enhance user engagement with our React star rating component.

React Star Rating Component

ReactJS Star Rating is a flexible and dynamic star rating component with plenty of features. It is easy to use and customize, making it perfect for any project.

Demo

Install

Using npm:

$ npm install reactjs-star-rating

OR

Using yarn:

$ yarn add reactjs-star-rating

Parameters

<StarRating
  maxRating={7} // Maximum rating value
  color="green" // Color of stars
  size={48} // Size of stars in pixels
  className="" // For custom styling
  defaultRating={2} // Default rating value
  readOnly={false} // Make rating read only
  showLabel={false} // Show label
  labels={["Bad", "Poor", "Ok", "Good", "Great"]} // Labels for rating
  onSetRating={(rating) => console.log(rating)} // Callback function when rating is set
/>

Examples

Default star rating

<StarRating color="green" size={48} defaultRating={2} maxRating={7} />

Star with custom labels

// NOTE: maxRating should be equal to the number of labels
<StarRating
  color="green"
  size={48}
  defaultRating={2}
  maxRating={5}
  showLabel={true}
  labels={["Bad", "Poor", "Ok", "Good", "Great"]}
/>

Read only star rating

<StarRating color="blue" size={48} defaultRating={2} maxRating={7} readOnly />

Star rating with callback function

<StarRating
  color="green"
  size={48}
  defaultRating={2}
  maxRating={7}
  onSetRating={(rating) => console.log(rating)}
/>

Star rating with custom styling

<StarRating
  color="green"
  size={48}
  defaultRating={2}
  maxRating={7}
  className="custom-star-rating"
/>

MIT License

Made with ❤ by Varshil Shah from 🇮🇳