React like button

How to add a like button to your React project

If you ever tried to add a like button to React I am sure you encountered a few obstacles on your way.

First, you cannot get away with a simple toggle function for changing a like button score, you need to store data somewhere so if you refresh the page the like is still there.
Second, you need to remember visitors interactions, so if somebody returns to the page they can still see their like. And you may be worried about how to do it without a signup while avoiding malicious use or bot spamming.
Third, decide how to visualize and what to do with all this data!

Choose a button, then copy & paste the code to see how easy it is

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

<Provider apiKey="acc0dbccce8e557db5ebbe6d605aaa">
  <LikeButton
    namespace="testing-react"
    id="everybody-like-now"
  />
</Provider>

Lyket in action!

Lyket takes care of all these nuisances for you! It lets you add GDPR-compliant like buttons on any React project, including NextJS, Gatsby, React Native and any other framework that uses React, and see the scores on your personal dashboard.

Here is a simple snippet that you can copy and paste to try it out. Remember! We are using a test API key so remember to register after and get your own or you will loose your data!

In this example we create a like button with id "how-to-beat-me-at-chess" under the "my-blog-post" category. To do that we import the Provider component and the LikeButton component where we want our button to be. Read more about configuring the Provider component on the docs

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

  <Provider apiKey="acc0dbccce8e557db5ebbe6d605aaa">
    <LikeButton
      namespace="my-blog-post"
      id="how-to-beat-me-at-chess"
    />
  </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. Click on it twice and the like will be removed, just like the Twitter heart.

Click! →

Changing templates

Speaking about Twitter, you can change the like button style by choosing one of the templates you can find in the templates section. If you choose the Twitter template you will get the famous Twitter heart

<LikeButton
  namespace="my-blog-post"
  id="how-to-beat-me-at-chess"
  component={LikeButton.templates.Twitter}
/>

Click! →

Changing like buttons 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 button.

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

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

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

<Provider
  apiKey="acc0dbccce8e557db5ebbe6d605aaa"
  theme={{
    colors: {
      background: "#b8fff3",
      text: "violet",
      primary: "rgba(255, 224, 138, 0.4)"
    }
  }}
>
  <LikeButton
    namespace="my-blog-post"
    id="how-to-beat-me-at-chess"
  />
</Provider>

Click! →

Creating your own button

You may want to give a like 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 button!

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

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

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

Click! →

Total likes: 0

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 onPress prop to do something like this:

<LikeButton
  namespace="my-blog-post"
  id="how-to-beat-me-at-chess"
  onPress={openSubscribeModal}
/>

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

Click! →

The other button types

Like 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