How to Use Rating Stars Component in React js
1 year ago
admin
Reactjs
In today's lesson, we will see how to use the rating stars component in react js, let's assume that we have an e-commerce website and we want to add ratings to our products.
Install the package
First, let's install the package we need.
npm i react-simple-star-rating
How to use the ratings component
Next, to use the component we have installed we can use the Rating component provided by the package it takes some props:
- onClick: it takes the method that will handle the rating we choose.
- initialValue: the initial value of the rating.
- size: the size of the star icon.
import React, { useState } from 'react';
import { Rating } from 'react-simple-star-rating';
export default function ProductRating() {
const [review, setReview] = useState({
product_id: 1,
user_id: 1,
title: '',
body: '',
rating: 0
});
const handleRating = (rating) => {
setReview({...review, rating});
}
return (
<div className="row my-4">
<div className="col-md-10 mx-auto">
<div className="card">
<div className="card-header bg-white">
<h4 className="mt-2">Reviews</h4>
</div>
<div className="card-body">
<div className="row my-4">
<div className="col-md-6 mx-auto">
<div className="card">
<div className="card-header bg-white">
<h5 className="mt-2">Add your review</h5>
</div>
<div className="card-body">
<form onSubmit={() => console.log(review)} className="my-4">
<div className="mb-2">
<input
type="text"
required
value={review.title}
onChange={(e) => setReview({...review, title: e.target.value})}
className="form-control" placeholder="Title*" />
</div>
<div className="mb-2">
<textarea
required
cols="30"
rows="5"
value={review.body}
onChange={(e) => setReview({...review, body: e.target.value})}
className="form-control"
placeholder="Review*"></textarea>
</div>
<div className="my-2">
<Rating
onClick={handleRating}
initialValue={review.rating}
size={32} />
</div>
<div className="mb-2">
<button
type="submit"
className="btn btn-sm btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Set the Rating component for read only
Next, to use the Rating component for read only you can use the readonly prop.
<Rating initialValue={review.rating}
readonly
size={24} />