Star rating React

Add star ratings to your React project in a few clicks!

-

Star ratings or rating components in general, are essential for blogs or e-commerces that want to receive feedbacks from its visitors.

At the end of each article, recipe or showcase, each visitor is able to express their satisfaction by choosing a number of stars (or hearts or anything else :D). This successful user feedback method is inherited from travel portals, where hotels and restaurants can be reviewed.

There are a lot of great Star rating React components around on Github, but the problems are always the same. Once you add the component, you have to integrate it with an API that keeps track of votes, you have to store ratings in a database, or otherwise you will have no way to remember which visitor has already voted. Most of the websites around do exactly like that!

Don't believe me? I will prove it to you! Try navigating to your favourite cooking recipies website, leave a rating, and then refresh the page. Are you able to vote again? That is because good looking Star rating Reacts are not enough!

Lyket keeps track of user ratings for you

This is where Lyket comes to help! It takes care of all the above nuisances for you, provides an easy to install integration, beautiful React star rating components, while respecting GDPR, for any React project, including NextJS, Gatsby, React Native. Moreover, you can see all the ratings ordered by most voted on your personal dashboard.

How Lyket star rating works on React

Here is an example of how it will work. With just a few lines of code, you will get the perfect star rating!

In this example we create a Star rating React component with id "my-ramen-recipe" under the "cooking-book" category. To do that we import the Provider component and the Rating component where we want our button to be. Read more about configuring the Provider component on the docs

import { Provider, RateButton } from "@lyket/react";

  <Provider apiKey="acc0dbccce8e557db5ebbe6d605aaa">
		<span className="try">Average rating: </span>
		<RateButton
			namespace="cooking-book"
			id="my-ramen-recipe"
			showRating="average"
		/>
		<span className="try">Click to rate! →</span>
		<RateButton
			namespace="cooking-book"
			id="my-ramen-recipe"
			showRating="user"
		/>
  </Provider>
Average rating:

Click to rate! →

As you can see we are rendering two star rating React components, one with the prop showRating set to average and one set to user. One is useful if you want to show the overall rating of your users, the other one if you want to let users vote and show what they have voted!

Use different rating icons!

The most known rating is clearly the star rating! But you can change the rating component style by choosing one of the templates you can find in the templates section. If you choose the Heart template you will get all hearts instead of stars.

<span className="try">Average rating: </span>
<RateButton
	namespace="cooking-book"
	id="my-ramen-recipe"
	showRating="average"
	component={RateButton.templates.Heart}
/>
<span className="try">Click to rate! →</span>
<RateButton
	namespace="cooking-book"
	id="my-ramen-recipe"
	showRating="user"
	component={RateButton.templates.Heart}
/>
Average rating:

Click to rate! →

Change the star rating colors!

You can use your website colors to style the React rating component. Do that by configuring the Provider component. It supports rgba, hex, and color names.

The background attribute changes the background color of empty vote.

the primary attribute will change the color of the active vote.

The animation attribute changes the hover effect color.

import { Provider, Rating } from "@lyket/react";

<Provider
  apiKey="undefined"
  theme={{
    colors: {
			primary: "#ffaa02",
			icon: "lightgrey",
    }
  }}
>
	<span className="try">Average rating: </span>
	<RateButton
		namespace="cooking-book"
		id="my-ramen-recipe"
		showRating="average"
	/>
	<span className="try">Click to rate! →</span>
	<RateButton
		namespace="cooking-book"
		id="my-ramen-recipe"
		showRating="user"
	/>
</Provider>
  
Average rating:
Click to rate! →

Create your own star rating button!

You may want to have a rating component more consistent with your website, for example you may want to use pizza as an icon as a rating icon!

Nothing easier, here is an example of using the pizza emoji as a rating component!

import { RateButton } from '@lyket/react';

<RateButton
	id="custom-button"
	namespace="pizza"
	onLoad={onLoad}
	onPress={onPress}
>
	{({
		handlePress,
		averageRating,
		userRating,
		isLoading,
		totalVotes,
	}) => (
		<>
			{Array.from(Array(5).keys()).map((index) => {
				if (userRating > index) {
					return (
						<button
							key={index}
							onClick={() => handlePress(index + 1)}
							disabled={isLoading}
						>
							🍕
						</button>
					);
				} else {
					return (
						<button
							onClick={() => handlePress(index + 1)}
							disabled={isLoading}
						>
							💔
						</button>
					);
				}
			})}
			<div>Your rating: {userRating}</div>
			<div>Average rating: {averageRating} stars out of 5</div>
			<div>Total votes: {totalVotes}</div>
		</>
	)}
</RateButton>
Your rating:
Average rating: 0 stars out of 5
Total votes: 0

Engage your users!

Once you have your star rating component up and running, you can start thinking about how to put this user-feedback to good use. Maybe asking your visitors to subscribe to your newsletter after they rated one of your recipies? Piece of cake!

You can use the onPress prop to open a modal that will ask users to subscribe:

<RateButton
	namespace="cooking-book"
	id="my-ramen-recipe"
	showRating="user"
	onPress={(button) => {
		alert("Thanks for your {button.attributes.userRating} rating! Do you want to subscribe to our newsletter?")
	}
/>
Click to rate! →

See results

Now that you have a review counter in your website, you might be interested to see statistics on the ratings.

Once you are registered you can access your private dashboard and take a look on all the buttons you created and all the ratings you received. If you are already registered take a look now!

For more details about Lyket's star rating React, and other type of feedback buttons, you can read our React documentation.

The other button types

The Star rating React is just one of user-feedback tools that Lyket offers. Each button has a different behaviour and can get you a different kind af feedback. See also