React like/dislike button

How to add like/dislike buttons to any React website with Lyket

Like/dislike buttons are crucial if you want to let visitors judge your content. For example, in a documentation you want to know if the instructions you are providing to use your service are clear enough.

In this post I will try to give a few like/dislike button examples that you can copy and paste directly in your code to see the magic happen.

What Lyket can do

If you were trying to implement a feedback system by yourself in your React project, you would need to be aware of three main things

Storing preferences in a database. Otherwise simply clearing the local storage will result in data loss.
Track visitors interactions, so if a visitor returns to the page their preference is still there.
Visualize all this information!

Lyket is a tool for adding like/dislike buttons to NextJS, Gatsby, or React Native website without any of these problems :D

It stores every visitor interaction in its database and thenyou are in complete control of your data. You can visualize it in your private area, import and export anytime. Moreover you don't have to worry about privacy because Lyket does not store sensible data making it GDPR-compliant.

A simple like/dislike button

Let's start with the the minimal configuration. You can copy and paste this snippet into your code or you can see the result here. Remember! We are using a test API key so remember to register after and get your own or you will loose your data!

First you should get an API key be registering to Lyket and use it to configure the Provider component. In this example we will use a test API key that resets data every day so remember to get your own! Read more about configuring the Provider component on the docs

Then, we choose an id, in this case it's "like-dislike-buttons-api" that belongs to the "my-documentation" category. It's all you need to get started!

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

<Provider apiKey="acc0dbccce8e557db5ebbe6d605aaa">
  <UpdownButton
    namespace="my-documentation"
    id="like-dislike-buttons-api"
  />
</Provider>

If you copy and paste this code you will see the following button. Try it out! If you click on it once it will add one like or dislike. Click on it twice and the like/dislike will be removed, just like Reddit.

Changing templates

Speaking about Reddit, you can change the like/dislike button style by choosing one of the templates you can find in the templates section. If you choose the Reddit template you will get the famous Reddit arrows, like this.

<UpdownButton
  namespace="my-documentation"
  id="like-dislike-buttons-api"
  component={UpdownButton.templates.Reddit}
/>

Changing colors

Some templates support color changing, for example the default one, so you can use your own color palette! You can do that by configuring the Provider component. Theme supports rgba, hex, and color names.

The background attribute changes the background color of inactive like/dislike button.

the primary attribute will change the background color of a clicked like button

the secondary attribute will change the background color of a clicked dislike button

The text attribute changes the counter font color and the icon color.

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

<Provider
  apiKey="acc0dbccce8e557db5ebbe6d605aaa"
  theme={{
    colors: {
      background: "rgba(255, 224, 138, 0.4)",
      text: "violet",
      primary: "#b8fff3"
      secondary: "rgba(220, 234, 108, 0.6)"
    }
  }}
>
  <UpdownButton
    namespace="my-documentation"
    id="like-dislike-buttons-api"
  />
</Provider>

Creating your own button

You may want to give a like/dislike button to be more consistent with your website, for example use your own logo an icon from your own icon set as background for a like/dislike button!

Nothing easier! Here is an example of using the pizza emoji as a like button!

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

<UpdownButton
  id="pizza"
  namespace="great-things"
>
  {({ handlePressUp,handlePressUp, totalScore, userVoteDirection, isLoading }) => {
    return (
      <div>
        <button
          className="big"
          onClick={handlePressUp}
          disabled={isLoading}
        >
          + 🍕
        </button>
        <span> or </span>
        <button
          className="big"
          onClick={handlePressDown}
          disabled={isLoading}
        >
          - 🍕
        </button>
        <div>Total votes: {totalScore}</div>
        {userVoteDirection > 0 ? <div>More pizza!</div> : <div>Less pizza!</div>}
      </div>
    )
  }}
</UpdownButton>

Total votes: 0

Less pizza!

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 likes that a button has received. If you are already registered take a look now!

For more details about Lyket's React like button you can read our React documentation.

Engage your visitors!

Once you have the buttons where you want them to be, for example in your blog posts, or in your documentation, 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 articles? Piece of cake!

You can use the onPressUp prop to do something like this:

<UpdownButton
  namespace="my-documentation"
  id="like-dislike-buttons-api"
  onPressUp={openSubscribeModal}
/>

Try to click on the button! It will open a dialog with the subscription form!

Click! →

The other button types

Like/dislike button is just one of the three kind of buttons that Lyket offers. Each button has a different behaviour and can get you a different kind af feedback. See also