Working on a React project for a client in New York, I needed to create a simple yet interactive star rating system for customer feedback.
The challenge was to make it fully dynamic, reusable, and easy to integrate into different parts of the app, whether it was for product reviews, restaurant ratings, or service feedback.
In this tutorial, I’ll show you how I built a Star Rating component in React from scratch. I’ll share two methods, one using basic React hooks and another using a third-party library for faster implementation.
Method 1 – Build a Star Rating Component Using React Hooks
This is my preferred approach because it gives you complete control over the behavior and styling of the component.
Here’s how I built it step-by-step.
Step 1: Set up Your React Project
First, create a new React app using Vite or Create React App.
npx create-react-app react-star-rating
cd react-star-rating
npm startOnce the setup is complete, open the project in your favorite editor (I use VS Code).
Step 2: Create the StarRating Component
Inside the src folder, create a new file called StarRating.js.
Then, add the following code:
import React, { useState } from "react";
import "./StarRating.css";
const StarRating = ({ totalStars = 5, onRatingChange }) => {
const [rating, setRating] = useState(0);
const [hover, setHover] = useState(0);
const handleClick = (value) => {
setRating(value);
if (onRatingChange) onRatingChange(value);
};
return (
<div className="star-rating">
{[...Array(totalStars)].map((_, index) => {
const starValue = index + 1;
return (
<span
key={index}
className={`star ${starValue <= (hover || rating) ? "active" : ""}`}
onClick={() => handleClick(starValue)}
onMouseEnter={() => setHover(starValue)}
onMouseLeave={() => setHover(0)}
>
★
</span>
);
})}
</div>
);
};
export default StarRating;Step 3: Add Styling
Now, let’s make it look great. Create a new file named StarRating.css in the same folder and add this CSS:
.star-rating {
display: flex;
gap: 8px;
font-size: 2rem;
cursor: pointer;
justify-content: center;
margin-top: 20px;
}
.star {
color: #ccc;
transition: color 0.2s ease-in-out;
}
.star.active {
color: #f5b50a;
}
.star:hover {
transform: scale(1.2);
}This simple styling gives you a clean, modern star rating look with hover effects.
Step 4: Use It in Your App
Open App.js and import your new component.
import React from "react";
import StarRating from "./StarRating";
function App() {
const handleRating = (value) => {
console.log(`User rated: ${value} stars`);
};
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h1>Rate Our Coffee Shop</h1>
<p>We’d love to know how your experience was!</p>
<StarRating totalStars={5} onRatingChange={handleRating} />
</div>
);
}
export default App;Now, when you click on the stars, your rating will be logged in the console. You can easily connect this to an API or store it in a database.
Step 5: Make It Reusable
You can now reuse this component anywhere in your React app.
For example:
<StarRating totalStars={10} onRatingChange={(val) => alert(val)} />You can refer to the screenshot below to see the output.
This flexibility makes it ideal for any rating scenario, restaurants, products, or service feedback.
Method 2 – Use a Third-Party Library (react-rating)
If you want a faster solution, you can use the react-rating library. It’s lightweight, customizable, and easy to integrate.
Here’s how to use it.
Step 1: Install the Library
npm install react-ratingStep 2: Create the Component
import React, { useState } from "react";
import Rating from "react-rating";
const StarRatingLib = () => {
const [rating, setRating] = useState(0);
return (
<div style={{ textAlign: "center", marginTop: "40px" }}>
<h2>Rate Our App</h2>
<Rating
initialRating={rating}
onChange={(rate) => setRating(rate)}
emptySymbol="☆"
fullSymbol="★"
fractions={2}
/>
<p>Your rating: {rating}</p>
</div>
);
};
export default StarRatingLib;This approach is perfect if you want to skip writing custom logic or CSS.
Step 3: Customize It
You can easily style the stars using CSS or even replace them with SVG icons for a more professional look.
Example:
.rating span {
color: #f5b50a;
font-size: 2rem;
}You can refer to the screenshot below to see the output.
Bonus Tip – Save Ratings to Local Storage
If you want to persist the user’s rating locally, you can modify the first method slightly:
useEffect(() => {
const savedRating = localStorage.getItem("userRating");
if (savedRating) setRating(Number(savedRating));
}, []);
const handleClick = (value) => {
setRating(value);
localStorage.setItem("userRating", value);
};Now, even after refreshing the page, the user’s rating will remain saved.
Why I Prefer the Custom Hook Method
While the library method is quick, I prefer the custom-built version because it gives me full control over:
- The number of stars
- Hover animations
- Saving or submitting data
- Accessibility and keyboard navigation
It’s also a great interview project to demonstrate your React skills.
When I first built this component for a restaurant feedback app in Chicago, users loved how interactive and smooth it felt. The same logic can easily be extended to half-star ratings, emoji-based feedback, or even thumbs-up/down systems.
That’s it! You now have a fully functional React Star Rating component that’s reusable, responsive, and easy to integrate into any project.
You may also read:
- React Component Design Patterns
- Build a React Chat UI Component
- React Component Refactoring Best Practice
- Pass Parameters to Components in React
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
