reactjs-star-rating
v0.2.0
Published
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.
Downloads
159
Maintainers
Readme
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"
/>