Building a Simple Star Rating Component in React

Star rating widgets are common in many applications. You see them on product reviews, movie sites, and service feedback forms. In this article, I will show how to build a simple and clean star rating component using React and the react-icons library. The goal is to understand how the component works step by step and why each part of the code exists.

What We Are Building

We will build a component that displays a number of stars. The user can move the mouse over the stars to preview a rating, and click to select a final rating. The selected rating stays visible unless the user chooses a different one.

The final result is a reusable component that can be used anywhere in a React application.

The React Component

Here is the complete component:

import { useState } from 'react';
import { FaStar } from 'react-icons/fa';
import './styles.css';

export default function StarRating({ noOfStars = 5 }) {
    const [rating, setRating] = useState(0);
    const [hover, setHover] = useState(0);
    function handleClick(getCurrentIndex) {
        setRating(getCurrentIndex);
    }
    function handleMouseEnter(getCurrentIndex) {
        setHover(getCurrentIndex);
    }
    function handleMouseLeave() {
        setHover(rating);
    }
    return (
        <div className="star-rating">
            {[...Array(noOfStars)].map((_, index) => {
                index += 1;
                return (
                    <FaStar
                        key={index}
                        className={index <= (hover || rating) ? "active" : "inactive"}
                        onClick={() => handleClick(index)}
                        onMouseMove={() => handleMouseEnter(index)}
                        onMouseLeave={handleMouseLeave}
                        size={40}
                    />
                );
            })}
        </div>
    );
}

And the CSS:

.active {
    color: #fff700;
}

.inactive {
    color: black;
}

How It Works

1. Managing the Rating State

The component uses two pieces of state:

const [rating, setRating] = useState(0);
const [hover, setHover] = useState(0);
  • rating stores the final selected rating.
  • hover stores the rating value while the user is moving their mouse over the stars.

This allows the stars to change color when the user hovers, but return to the saved rating when the mouse leaves.

2. Rendering the Stars

This line creates an array with as many stars as needed:

[...Array(noOfStars)]

We then loop through it and render a <FaStar> for each item.

.map((_, index) => {
    index += 1;
    return <FaStar ... />
})

Adding 1 ensures star numbers start at 1 instead of 0.

3. Handling User Interaction

There are three key event functions:

Clicking a Star

onClick={() => handleClick(index)}

This saves the rating permanently.

Hovering Over a Star

onMouseMove={() => handleMouseEnter(index)}

This updates the temporary hover rating.

Leaving the Star Area

onMouseLeave={handleMouseLeave}

This resets the hover value back to the saved rating.

4. Applying the Style

The star color depends on this condition:

index <= (hover || rating)

If the star index is less than or equal to either the current hover value or the saved rating, it becomes yellow. Otherwise, it stays black.

The style is handled by these classes:

.active {
    color: #fff700;
}

.inactive {
    color: black;
}

This makes the component easy to customize later.

Why This Component Is Useful

This star rating component has a few important benefits:

  • It is fully reusable. You can change the number of stars simply by changing the noOfStars prop.
  • It is easy to style because the visual part is controlled by CSS classes.
  • It provides a smooth experience thanks to hover previews.
  • It uses only React hooks and one small icon library.

How You Can Use It

You can import this component anywhere in your React application:

<StarRating noOfStars={5} />

Or you can create larger rating systems by changing the number:

<StarRating noOfStars={10} />

Conclusion

This simple star rating component demonstrates how React hooks and event handling can be combined to create interactive UI elements. Even beginners can understand and extend this pattern to build more advanced components.

If you want to improve it, you can:

  • Make the stars clickable only once.
  • Add animations.
  • Save the rating to a database.
  • Pass the rating value back to a parent component.

This version is a solid starting point for any application that needs a clean and easy-to-use rating system.

Visit the repo

Happy coding!

Building a Simple Star Rating Component in React was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More

Related Posts