xxxxxxxxxx
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;
xxxxxxxxxx
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;