0.2.0 • Published 9 months ago
reactjs-star-rating v0.2.0
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"
/>