How to create a rating component in ReactJS ?
React JS is a powerful JavaScript library for building user interfaces, and it provides a flexible and efficient way to create reusable components. One common component in many web applications is a rating system, which allows users to provide feedback or rate certain items. In this article, we will explore how to create a rating component in ReactJS.
Prerequisite:
- Basic knowledge of npm or yarn.
- styled-components.
- Basic Knowledge of useState React hooks.
Steps to create React App and Install required modules
Step 1: You will start a new project using create-react-app command
npx create-react-app react-rating
Step 2: Now go to your react-rating folder by typing the given command in the terminal.
cd react-rating
Step 3: Install the dependencies required in this project by typing the given command in the terminal.
npm install --save styled-components
npm install --save react-icons
Now create the components folder in src then go to the components folder and create two files Rating.js and RatingStyles.js.
Project Structure: The file structure in the project will look like this.
Example: In this example, we will design a rating component, for that we will need to manipulate the App.js file and other created components file.
Rating.js
import React, { useState } from "react" ; import { FaStar } from "react-icons/fa" ; import { Container, Radio, Rating } from "./RatingStyles" ; const Rate = () => { const [rate, setRate] = useState(0); return ( <Container> {[...Array(5)].map((item, index) => { const givenRating = index + 1; return ( <label> <Radio type= "radio" value={givenRating} onClick={() => { setRate(givenRating); alert( `Are you sure you want to give ${givenRating} stars ?` ); }} /> <Rating> <FaStar color={ givenRating < rate || givenRating === rate ? "000" : "rgb(192,192,192)" } /> </Rating> </label> ); })} </Container> ); }; export default Rate; |
RatingStyles.js
import styled from 'styled-components' ; export const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 60vh; font-size: 60px; ` export const Radio = styled.input` display: none; ` export const Rating = styled.div` cursor: pointer; ` |
App.js
import './App.css' ; import Rating from './components/Rating' ; function App() { return ( <Rating /> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Contact Us