How to Build a Dynamic Star Rating Component in React: Step-by-Step Guide

React JS

Learn how to build a dynamic star rating component in React step by step. Perfect for beginners and essential for React projects and interviews. Includes code snippets and examples!

NGNishan Giri
2024-11-16
Star Rating Component in React: Step-by-Step Guide

Star rating components are common in modern web apps and make it easy to collect user feedback. Whether you’re shopping online, reviewing a restaurant, or rating an app, star ratings offer a simple and clear way for users to share their opinions. It's also an important feature to implement in React for interviews and real-world projects. Let's jump into building a React star rating component step by step.

What we'll be building

Follow the step by step implementation below or Get the code directly from my sandbox (Thank me later..🤭)

I am asuming that you have the bolier plate steup for a react application with create-react-app.

Step 1: Install react-icons for React Star Rating Component

First, we need to install the react-icons library to access star icons for our rating component. Run the following command in your terminal:

npm install react-icons --save

Step 2: Create the StarRating Component

Next, create a new file named StarRating.js and add the following code. This component uses state to manage the selected rating and hover effect.

Code Example: React Star Rating Component

import { useState } from "react";
import { FaStar } from "react-icons/fa";
 
export default function StarRating() {
  const [selected, setSelected] = useState(0); // State variable to store selected rating
  const [hover, setHover] = useState(0); // State variable to store hover state
 
  return (
    <section className="container">
      <h2>How was your experience?</h2>
      <div className="star-rating">
        {/* Mapping an array with values 1 to 5 */}
        {[1, 2, 3, 4, 5].map((num) => (
          <FaStar
            key={num}
            onClick={() => setSelected(num)} // Set selected rating
            onMouseOver={() => setHover(num)} // Track hover state
            onMouseLeave={() => setHover(selected)} // Reset hover to selected on mouse leave
            size={50}
            color={num <= hover ? "orange" : "grey"} // Highlight stars on hover or selection
          />
        ))}
      </div>
      <h2>Rating: {hover}</h2>
    </section>
  );
}

Step 3: Add CSS for Styling

To style the star rating component, add the following CSS code to styles.css:

/* Removing default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.App {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
 
.star-rating {
  cursor: pointer;
}

Step 4: Import and Use the StarRating Component

Finally, import the StarRating component into your App.js file and render it:

import StarRating from "./StarRating";
import "./styles.css";
 
export default function App() {
  return (
    <div className="App">
      <StarRating />
    </div>
  );
}

Conclusion

Now that you’ve built a functional React star rating component, challenge yourself by adding more features like half-star ratings or animations.

LinkedIn
X