In this article, we will implement react rating star in react js.
First, we should install react rating star in our application
npm i react-rating-stars-component
Import this package into our application
import ReactStars from "react-rating-stars-component";
import React from "react";
import { render } from "react-dom";
Below you can see how to use react raiting star in our application
import ReactStars from "react-rating-stars-component";
import React from "react";
import { render } from "react-dom";
const ratingChanged = (newRating) => {
console.log(newRating);
};
render(
<ReactStars
count={5}
onChange={ratingChanged}
size={24}
isHalf={true}
emptyIcon={<i className="far fa-star"></i>}
halfIcon={<i className="fa fa-star-half-alt"></i>}
fullIcon={<i className="fa fa-star"></i>}
activeColor="#ffd700"
/>,
document.getElementById("where-to-render")
);
Here is a list of props you can give the component.
count
How many stars in total do you want
value
Set rating value
char
Which character would you like to feature as
edit
Should you only be able to view ratings or be able to choose them
isHalf
The decimal part will be eliminated if the component rounds to half stars; else, standard algebraic procedures will be applied.
a11y
Should a component be a keyboard-based interface
You can see below the output
