Save time and effortlessly implement a star rating system in your app without the need to write the entire code from scratch. It's easily customizable and straightforward to integrate.
-
Run the following command
npm install star-ratings-react
-
Import the StarRating component into your React application.
import { StarRating } from "star-ratings-react";
-
Define a state variable to store the rating value in your component.
const [rating, setRating] = useState(0); const [rating2, setRating2] = useState(0); const [rating3, setRating3] = useState(0); const [rating4, setRating4] = useState(0);
-
Add the StarRating component to your JSX, passing the state variable and the function to set the rating.
return ( <> <h1>Hello, Stars !!!</h1> <StarRating rating={rating} onSetRating={setRating} size={20}/> <StarRating rating={rating2} onSetRating={setRating2} starColor={"skyblue"} /> <StarRating rating={rating3} onSetRating={setRating3} starColor={"white"} maxRating={5}/> <StarRating rating={rating4} onSetRating={setRating4} starColor={"red"} maxRating={3}/> </> );