React star rating
Add star ratings to any React project!
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 React Star rating 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 React Star ratings 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 React Star rating 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>
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}
/>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>
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>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?")
}
/>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 React Star rating 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