post-ad

Implement Rating Star In React Js

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

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories

page-ad