How to integrate 5 star rating in React JS | Updated 2024

101

Adding a star rating system to a React application can significantly enhance user interaction by providing a visually engaging way for users to provide feedback. The react-simple-star-rating library simplifies this process, offering a lightweight, customizable component that can be easily integrated into any React project. This guide will walk you through the setup, usage, and customization of this library.

Setting Up Your React Environment

First, ensure you have a React project set up. If you need to create a new project, use the following commands:

npx create-react-app my-rating-app
cd my-rating-app

Step by Step Guide 5 star rating integration in React JS

Step 1: Install the react-simple-star-rating Library

Install the library in your project directory using npm:

npm install react-simple-star-rating

Step 2: Implement the Rating Component

To integrate the rating component, first import it into your desired file, typically App.js:

import { Rating } from 'react-simple-star-rating';

Then, add the Rating component to your application:

function App() {
  return (
    <div className="App">
      <h2>Please rate our product:</h2>
      <Rating />
    </div>
  );
}

export default App;

Step 3: Managing State and Handling Ratings

To interactively capture user ratings, manage the rating value using React’s state and handle changes with a function:

import React, { useState } from 'react';
import { Rating } from 'react-simple-star-rating';

function App() {
  const [rating, setRating] = useState(0);

  const handleRating = (rate) => {
    setRating(rate);
    alert(`You rated: ${rate / 20} stars`);
  };

  return (
    <div className="App">
      <h2>Please rate our product:</h2>
      <Rating onClick={handleRating} ratingValue={rating} />
      <p>Your rating: {rating / 20} stars</p>
    </div>
  );
}

export default App;

Step 4: Customizing the Rating Component

The react-simple-star-rating library allows for extensive customization to fit the design and functionality needs of your application:

Basic Customizations:

Adjust size, color, and half-star ratings:

import React, { useState } from 'react';
import { Rating } from 'react-simple-star-rating';

function App() {
  const [rating, setRating] = useState(0);

  const handleRating = (rate) => {
    setRating(rate);
    console.log(`You rated: ${rate / 20} stars`);
  };

  return (
    <div className="App">
      <h2>Rate Our Service:</h2>
      <Rating
        onClick={handleRating}
        ratingValue={rating}
        size={30} // size of each star
        fillColor="gold" // color of the filled stars
        emptyColor="gray" // color of the unfilled stars
        allowHalfIcon={true} // allow users to select half-stars
      />
      <p>Your rating: {rating / 20} stars</p>
    </div>
  );
}

export default App;

Using Custom Icons:

Customize the appearance using custom SVG icons for a unique rating experience:

import React, { useState } from 'react';
import { Rating } from 'react-simple-star-rating';

// Import custom SVG icons or use any React components as icons
import { ReactComponent as FullStarIcon } from './assets/fullStar.svg';
import { ReactComponent as EmptyStarIcon } from './assets/emptyStar.svg';

function App() {
  const [rating, setRating] = useState(0);

  const handleRating = (rate) => {
    setRating(rate);
    console.log(`You rated: ${rate / 20} stars`);
  };

  return (
    <div className="App">
      <h2>Custom Icon Rating:</h2>
      <Rating
        onClick={handleRating}
        ratingValue={rating}
        fullIcon={<FullStarIcon />} // Custom full star icon
        emptyIcon={<EmptyStarIcon />} // Custom empty star icon
        size={25}
      />
      <p>Your rating: {rating / 20} stars</p>
    </div>
  );
}

export default App;

These examples demonstrate both basic and advanced customizations, allowing you to tailor the star rating component extensively to match your application’s design and user experience requirements.

Conclusion

The react-simple-star-rating library provides a robust and customizable solution for adding star ratings to your React applications. By following the steps outlined in this guide, you can implement a responsive and visually appealing rating system that enhances user interaction and feedback.

5 star rating in React JS – FAQs