Breaking News: Grepper is joining You.com. Read the official announcement!

build a star rating in react

Healthy Hamerkop answered on August 23, 2022 Popularity 10/10 Helpfulness 5/10

answer build a star rating in react

related star rating react

build a star rating in react

Comment

import React, { useState } from "react";
import { FaStar } from "react-icons/fa";

const StarRate = () => {
  const [rating, setRating] = useState(null);
  const [hoverFill, setHoverFill] = useState(null);

  return (
    <div className="star">
      {[...Array(5)].map((_, index) => {
        const ratingValue = index + 1;

        return (
          <button
            key={index}
            onMouseEnter={() => setHoverFill(ratingValue)}
            onMouseLeave={() => setHoverFill(null)}
            onClick={() => setRating(ratingValue)}
          >
            <FaStar
              size={100}
              style={{
                color:
                  ratingValue <= (hoverFill || rating) ? "#ffe101" : "#ccc",
              }}
              onChange={() => setRating(ratingValue)}
              value={ratingValue}
            />
          </button>
        );
      })}
    </div>
  );
};

export default Star;

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: frankiefab.hashnode.dev

Tags: a-star build javascript rating

Link to this answer
Share Copy Link

Contributed on Aug 23 2022

Healthy Hamerkop

0 Answers Avg Quality 2/10

Closely Related Answers

star rating react

Comment

import React, { useState } from 'react';
import StarRatings from './react-star-ratings';

const Foo = () => {
  const [rating, setRating] = useState(2);

  const changeRating = (newRating, name) => {
    setRating(newRating);
  };

  return (
    <StarRatings
      rating={rating}
      starRatedColor="blue"
      changeRating={changeRating}
      numberOfStars={6}
      name='rating'
    />
  );
};

export default Foo;

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 17 2024

Itchy Ibex

0 Answers Avg Quality 2/10

build a star rating in react

Contents

More Related Answers

build a star rating in react

Closely Related Answers

star rating react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.