React rating component

React rating component with Lyket

-

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 or showcase, the visitor will be 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 rating components around on Github, but the problem is 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 rating components are not enough! -- Maybe it didn't happen for your favourite website, but I assure you that it happens most of the times! ;)

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.

Important notice!

Lyket React Rating component is not available yet! We are still working on it, but it will be available soon! If you are interested or you want to know an ETA, simply contact us in the contact page :)

How Lyket React Rating component will work

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 rating component with id "my-ramen-recipy" 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, Rating } from "@lyket/react";

  <Provider apiKey="acc0dbccce8e557db5ebbe6d605aaa">
    <Rating
      namespace="cooking-book"
      id="my-ramen-recipy"
    />
  </Provider>
Click! →

Changing templates

The most known React rating component 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.

<Rating
  namespace="cooking-book"
  id="my-ramen-recipy"
  component={Rating.templates.Heart}
/>

Changing colors

You can use your website colors to style the React rating component. Do that by configuring the Provider component, that 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="acc0dbccce8e557db5ebbe6d605aaa"
  theme={{
    colors: {
      background: "#b8fff3",
      animation: "#ffaa02"
      primary: "violet"
    }
  }}
>
  <Rating
    namespace="cooking-book"
    id="my-ramen-recipy"
  />
</Provider>
  
Click! →

Creating your own 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 for a rating component!

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

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

<Rating
  id="pizza"
  namespace="great-things"
>
  {({ handlePress, totalVotes, userLiked, isLoading }) => {
    return (
      <div>
        <button
          className="big"
          onClick={handlePress}
          disabled={isLoading}
        >
          🍕
        </button>
        <strong>Total votes: {totalVotes}</strong>
        {userLiked && <div>Thanks for liking pizza!</div>}
      </div>
    )
  }}
</Rating>
Click! →

Now you can click on pizza and see your score growing!

Where? On the dashboard of course!

Once you are registered you can access your private area 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 React rating component you can read our React documentation.

Engage your visitors!

Once you have your rating components where you want them to be, 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 liked one of your recipies? Piece of cake!

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

<Rating
  namespace="cooking-book"
  id="my-ramen-recipy"
  onPress={openSubscribeModal}
/>

The other button types

The React Rating Component 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