reactjs-star-rating

React Star Rating Component

ReactJS Star Rating is a flexible and customizable star rating component that supports both full and half-star ratings. It comes with features like custom labels, read-only mode, hover effects, and custom styling, making it perfect for any React project.

Demo

Installation

Using npm:

npm install reactjs-star-rating

Using yarn:

yarn add reactjs-star-rating

Features

• ⭐ Full and half-star ratings
• 🎨 Customizable colors and sizes
• 🏷️ Custom labels support
• 🔒 Read-only mode
• 📱 Responsive design
• 🎯 Callback functions
• 💅 Custom styling support

Basic Usage

import StarRating from "reactjs-star-rating";

function App() {
  return <StarRating defaultRating={3} maxRating={5} />;
}

Props

Prop	Type	Default	Description
maxRating	number	5	Maximum rating value
color	string	"#fcc419"	Color of the stars
size	number	48	Size of stars in pixels
className	string	""	Custom CSS class name
defaultRating	number	0	Initial rating value
readOnly	boolean	false	Makes the rating read-only
showLabel	boolean	true	Shows/hides the rating label
labels	string[]	[]	Custom labels for ratings
onSetRating	function	undefined	Callback when rating changes
allowHalf	boolean	false	Enables half-star ratings

Examples

Basic Star Rating

<StarRating defaultRating={3} maxRating={5} />

Half Star Rating

<StarRating
  allowHalf
  defaultRating={2.5}
  maxRating={5}
  color="purple"
  onSetRating={(rating) => console.log(rating)}
/>

Custom Labels

<StarRating
  maxRating={5}
  showLabel={true}
  labels={["Poor", "Fair", "Good", "Very Good", "Excellent"]}
  defaultRating={3}
  color="green"
/>

Read-only Rating

<StarRating defaultRating={4} maxRating={5} readOnly color="blue" />

With Callback Function

<StarRating
  maxRating={5}
  onSetRating={(rating) => {
    console.log(`Selected rating: ${rating}`);
  }}
/>

Custom Styling

<StarRating
  maxRating={5}
  className="custom-star-rating"
  size={32}
  color="#ff9800"
/>

Styling

You can customize the appearance using CSS by targeting the provided className:

.custom-star-rating {
  /* Your custom styles */
  background: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Varshil Shah

Made with ❤ by Varshil Shah from 🇮🇳