How to create a Rating component using React or NextJs
Mainly in an e-commerce application, we do have a review and ratings for all products. In this article, I will create a star rating component using react and convert 0 - 100% (percent) value into 1 to 5-star representation. This is what the following will look like.
Let's get started by creating an application using the create-react-app command like the below -
npx create-react-app rating-app
Then create a ratings.js file along with the ratings.module.css file. Here, the idea is we are going to deal with two sets of star icons. One with filled with a golden color and another is filled with white color. Here is the two icon -
Understanding the initializations, props, and callback -
The Rating component has a few props for configuration for your needs -
Rating.propTypes = {
ratingInPercent: number.isRequired,
iconSize: string,
showOutOf: bool.isRequired,
enableUserInteraction: bool.isRequired,
onClick: func
};
- ratingInPercent: <Should be number and value from 0 to 100>
- iconSize:<Should be string, can be 's', 'm' and 'l'>
- showOutOf: <Boolean true/false, for handling out 5 or not>
- enableUserInteraction: <Boolean true/false>
- onClick: <if user interaction is enabled, then prompt user which star he/she has selected>
Demo time:
So, the custom rating component is ready to use, feel free to modify yourself based on your needs. And let me know about your requirement so I can add more features to it. Please share and add your comments below.
Happy Coding!
-LP