Effortless Star Rating Implementation with custom useStar Visualization hook in React

Introduction

Have you ever come across a website with a rating feature, such as an e-commerce site or a blog? Ratings play a crucial role in influencing our decisions while navigating these websites. For instance, when shopping for a laptop on Amazon, we often check the product's rating to gauge its quality based on user experiences. A positive rating might lead us to make a purchase, while a negative one could deter us.

Additionally, ratings allow us to express appreciation or dissatisfaction with a product or service. If we're dissatisfied, we leave comments and rate accordingly. Star ratings are an essential part of this feedback system, and that's what we'll focus on in this blog.

Introducing the useStar Visualization Hook

The useStar visualization hook is a custom hook designed to simplify the process of rendering star ratings in the UI. It alleviates the burden of handling logic for displaying stars, including choosing icons and handling fractional stars.

By using the useStar hook, developers can offload all the intricate logic and icon management to the hook itself, enabling them to effortlessly render star ratings in the UI.

How does it work

The useStar hook functions like a generator, taking in input and producing immediate results without involving asynchronous operations.

To use the hook, you need to provide three parameters in the following order: RATING NUMBER, BASE STAR NUMBER and an OBJECT CONTAINING CSS STYLES.

Rating Number

The first parameter, the RATING NUMBER, represents the actual rating given to a product or item by users. It should be a number, and the hook is strongly typed to only accept numeric values.

Base Star Number

The BASE STAR NUMBER refers to the maximum number of stars to display. Most websites use 5 stars, but some may prefer using 7 or 10 stars to rate their products. Regardless of the number you choose, the base stars cannot exceed the rating number, as it represents the highest possible rating.

Object Containing CSS Styles

The last parameter is an object containing CSS styles that override the hook's default styles. You can choose to use the default styles by passing in an empty object. The hook's default style is as follows:

const DEFAULT_STYLE: object = {
    fontSize: "20px",
    color: "gold",
    margin: "0 5px",
  };

When you have successfully passed in data into the hook eg. useStarVisualization(2.6, 5, {color: "red"}), the hook will take all this and spit out a react component of stars using the fontAwesome library. That is why the extension is TSX and not TS.

The hook distinguishes between three types of stars: empty star, half star, and full star.

Empty star

The empty star represents the state when the user's rating doesn't fill up all the stars. For example, a rating of 3.0 with a base of 5 will show 3 full stars and 2 empty stars. The calculation for empty stars is base star - rating. When a half star is present, the calculation changes.

Half star

The half star represents the state between a full star and an empty star. When the decimal unit of the rating is greater than 0, a half star appears. For example, a rating of 3.0 with a base of 5 will not have a half star, while a rating of 2.8 with a base of 5 will display 2 full stars, 1 half star, and 2 empty stars.

Full star

The full star represents the maximum state of a star. It corresponds to the whole number part of the rating. For instance, a 5.0 rating with a base of 5 will display 5 full stars, while a 2.1 rating with a base of 10 will show 2 full stars, 1 half star, and 7 empty stars.

How to use

Before we proceed to use the hook, let's first clone the repository to get access to the hook and install the necessary dependencies.

1. Clone the Repository
   https://github.com/GeneralAike/useStarVisualization.git

2. Copy the useStarVisualization hook from the hooks folder into your project. The file is located at src/hooks/useStarVisualization.tsx.

3. Import the useStarVisualization hook
   import useStarVisualization from "./hooks/useStarVisualization";.
   Edit the directory to your appropriate hooks folder where the useStarVisualization file is.

4. Install the following dependencies
   

npm install @fortawesome/react-fontawesome
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-regular-svg-icons

As you can see, these dependencies are used for the icons only. The core code is written purely in TypeScript.

Generate your stars by calling the function in your JSX or TSX

<div>
  {useStarVisualization(data.rating.rate, 5, {
  fontSize: "18px",
  color: "red",
  margin: "3px",
  })}
</div>

Once you have completed these steps, useStarVisualization hook will be integrated into your project successfully.

Conclusion

The useStar visualization hook was designed by developers for developers. I hope you now understand how to integrate the hook into your project seamlessly and use it effectively. If you found this blog helpful, please consider leaving a like and sharing your experience in the comments. Thank you!