How to create rating stars in React

In web development, user feedback enhances user experience and engagement. One common way to gather feedback is through rating systems, where users can express their opinions by assigning a numerical value to a product or service. Ant Design provides a convenient rate component in its React UI library, allowing developers to easily integrate rating functionality into their applications.

Why rating stars are used?

Here are some of the top reasons why developers may need to use rating stars in their web applications:

• Gathering product feedback: Ratings provide valuable insights into user satisfaction levels with products or services. By collecting ratings, businesses can identify areas for improvement and prioritize enhancements.

• Evaluating user-generated content: Rating systems are useful for users to assess the quality or relevance of user-generated content, such as articles, reviews, or comments. This helps maintain content quality and credibility.

• Personalizing recommendations: Ratings can be used to personalize recommendations and suggestions based on user preferences. By analyzing user ratings, applications can offer tailored suggestions that align with individual tastes and interests.

Ratings in Ant Design

Ant Design’s rate component offers a versatile solution for implementing rating functionality in React applications. Here are some key advantages of using the Ant Design rate component:

• Customization: Developers can easily customize the appearance and behavior of the rate component to suit their application’s requirements. This includes setting the number of stars, customizing colors, and defining tooltips.

• Flexible input options: The rate component supports various input methods, including mouse clicks, keyboard input, and touch gestures, ensuring accessibility and ease of use for all users.

• Accessibility features: Ant Design prioritizes accessibility in its components, ensuring that the rate component is navigable and usable by users with disabilities. This includes keyboard navigation support and screen reader compatibility.

Installation

We first need to install the Ant Design (antd) library in our React project to get started. We can use either of the following installation commands:

Code example

Let’s look at the rate component in action in the following code example:

Explanation

In the App.js file:

• Line 1: We import the Rate component from the Ant Design library to use in our React application.

• Line 27: We implement the default Rate component without any customization.

• Line 29: We render the Rate component with half stars enabled (allowHalf) and set the default value to 2.5.

• Lines 31–36: We render the Rate component with a custom character (HeartFilled icon) instead of stars. We enable the half stars and set the default value to 3. The style prop is used to change the color of the icon to “red.”

• Lines 38–42: We render the Rate component with customized characters based on the rating value. It uses the character prop to dynamically render custom icons defined in the customIcons object in lines 11–17.

• Line 44: We render the Rate component with tooltips defined in the desc array in line 19. We also specify the onChange handler to update the value state when the rating is changed by the user, and set the current value of the Rate component to the value state using the useState hook.