How You Can Build a Dynamic Star Rating Component in React.js (Full, Half, and Empty Stars Included)

When it comes to modern web applications, a star rating component is almost a must.

Whether you’re working on a product page, a movie app, or a review system — users expect to see clear, beautiful ratings.

Today, I'm walking you through how you can build a powerful and flexible Star Rating component in React.js — one that handles full, half, and empty stars perfectly.

And don’t worry — it’s easier than you think. Let’s jump in!

---

What We're Going to Build

We'll create a React component that:

• Renders full, half, and empty stars dynamically.
• Always maintains a constant total number of stars (default: 5).
• Looks clean and polished using react-icons.
• Is reusable and customizable for different projects.

---

Step 1: Install the Required Package

First, we’ll need some star icons.

Let’s grab them using react-icons:

npm install react-icons

---

Step 2: Understand the Star Logic

Before we jump into the code, here’s the simple plan:

Term	Logic
Total Stars	A constant, usually 5.
Full Stars	Math.floor(rating)
Half Star	If rating is not an integer, add 1 half star.
Empty Stars	Remaining stars to complete 5.

Important rule:

There can only ever be at most one half star — no two half stars, no weird decimals!

---

Step 3: Code the Star Rating Component

Here’s the full working code:

// StarRating.jsx
import { FaStar, FaStarHalfAlt, FaRegStar } from "react-icons/fa";

const StarRating = ({ rating }) => {
  const totalStars = 5;

  // Full Stars
  const fullStars = Math.floor(rating);

  // Half Star
  const halfStars = Number.isInteger(rating) ? 0 : 1;

  // Empty Stars
  const emptyStars = totalStars - (fullStars + halfStars);

  // Build the stars array
  const starsArray = [];

  // Full stars
  for (let i = 0; i < fullStars; i++) {
    starsArray.push(<FaStar key={`full-${i}`} color="gold" />);
  }

  // Half star
  if (halfStars) {
    starsArray.push(<FaStarHalfAlt key="half" color="gold" />);
  }

  // Empty stars
  for (let i = 0; i < emptyStars; i++) {
    starsArray.push(<FaRegStar key={`empty-${i}`} color="gray" />);
  }

  return (
    <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
      {starsArray}
    </div>
  );
};

export default StarRating;

---

Step 4: How to Use It

Super simple! Just import it and pass a rating prop:

import StarRating from './StarRating';

function App() {
  return (
    <div>
      <h1>Ratings:</h1>
      <StarRating rating={4.3} />
      <StarRating rating={3} />
      <StarRating rating={2.7} />
    </div>
  );
}

export default App;

Here’s how it looks:

Rating	Visual Result
4.3	⭐⭐⭐⭐🌓
3.0	⭐⭐⭐⬜⬜
2.7	⭐⭐🌓⬜⬜

Smooth, clean, dynamic.

---

Dynamic Star Colors

Want ratings to feel even more alive?

Let’s color stars differently based on the rating:

// Helper function
const getStarColor = (rating) => {
  if (rating >= 4) return "green";     // High rating
  if (rating >= 2) return "orange";    // Medium rating
  return "red";                        // Low rating
};

And inside the stars loop, use it like:

starsArray.push(<FaStar key={`full-${i}`} color={getStarColor(rating)} />);

This way users can feel the rating just by glancing at the colors!

---

Best Practices to Follow

• Validate your ratings to stay between 0 and 5.
• Add accessibility labels for better UX (e.g., aria-label="Rating 4.5").
• Make it dynamic — pass total number of stars as a prop if needed.
• Handle edge cases like 0, 5, 4.9, 1.1 properly.

---

Building a reusable Star Rating Component in React.js doesn’t have to be complicated.

With this setup, you can easily plug beautiful ratings into any project — and even customize them more if you want.

Start simple, and expand — that's the React way! ✨

If you found this helpful, drop a ❤️ and let’s build more cool stuff together!

Happy coding! 🚀

---