DEV Community

Cover image for Simple React Projects (Star Rating) || Day #6 0f #100daysofMiva
TD!
TD!

Posted on

Simple React Projects (Star Rating) || Day #6 0f #100daysofMiva

Image description

Project Overview

The goal of this project was to build a reusable star rating component that can:

  • Display a customizable number of stars.
  • Highlight stars based on the user's rating.
  • Change the highlighted stars on hover to provide visual feedback.
  • Persist the user's rating after selection.

Technicalities Involved

State Management: The component manages two pieces of state: rating (the user's selected rating) and hover (the star being hovered over).

Dynamic Rendering: The stars are dynamically rendered based on the noOfStars prop, allowing flexibility in the number of stars displayed.
Conditional Styling: The component applies different styles to the stars based on whether they are active (rated or hovered) or inactive.

Code Breakdown

Let's break down the code step by step:

  1. Import Statements
javascript

import { useState } from "react";
import { FaStar } from "react-icons/fa";
import './styles.css';
Enter fullscreen mode Exit fullscreen mode
  • useState: React’s useState hook is used to manage the component's state.

  • FaStar: The star icons are imported from the react-icons library, specifically from Font Awesome's set of icons.

  • styles.css: A separate CSS file is imported to style the star rating component.

  1. Component Definition
javascript

export default function StarRating({ noOfStars = 5 }) {
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);
Enter fullscreen mode Exit fullscreen mode
  • StarRating: This is the main component function that renders the star rating UI.

  • noOfStars: A prop with a default value of 5. It determines the number of stars in the component.

  • rating: A state variable that stores the user’s current rating.

  • setRating: A function to update the rating state.

  • hover: A state variable that tracks the star index the user is currently hovering over.

  • setHover: A function to update the hover state.

  1. Event Handlers
javascript

  function handleClick(getCurrentIndex) {
    setRating(getCurrentIndex);
  }

  function handleMouseEnter(getCurrentIndex) {
    setHover(getCurrentIndex);
  }

  function handleMouseLeave() {
    setHover(rating);
  }
Enter fullscreen mode Exit fullscreen mode
  • handleClick: Updates the rating state to the index of the star that the user clicks.

  • handleMouseEnter: Updates the hover state to the index of the star the user hovers over, providing real-time feedback.

  • handleMouseLeave: Resets the hover state to match the current rating when the user stops hovering, ensuring that the stars reflect the user's last selection.

  1. Rendering the Stars
javascript

  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>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • Star Rendering: The stars are rendered dynamically using Array(noOfStars).map(). This creates an array with noOfStars elements and maps over it to render the correct number of FaStar components.

  • index += 1: The index is incremented by 1 to start from 1 instead of 0, aligning with a more intuitive star rating system (1-5 rather than 0-4).

FaStar Component:

  • key: A unique key is assigned to each star based on its index.

  • className: The star’s class is determined by whether it is "active" or "inactive". A star is "active" if its index is less than or equal to the hover or rating state, otherwise, it is "inactive".

  • onClick: Calls handleClick with the star’s index, updating the rating.

  • onMouseMove: Calls handleMouseEnter with the star’s index, updating the hover state.

  • onMouseLeave: Calls handleMouseLeave to reset the hover state to the current rating.

  • size={40}: Sets the size of the star icons to 40 pixels.

Project Summary

State Management: useState is used effectively to manage the current rating and hover states.

Event Handling: User interactions are handled through event listeners for click and hover actions, providing real-time visual feedback.

Dynamic Rendering: The number of stars rendered is controlled via a prop, making the component flexible and reusable.

See project on GitHub

Top comments (2)

Collapse
 
mayowakalejaiye profile image
mayowa-kalejaiye

sharp!

Collapse
 
marvellye profile image
Ezekiel Marvellous

We'll detailed👍🏻👏🏻