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

-

Lyket is the ultimate tool to quickly implement GDPR-compliant like/dislike buttons on any React project, NextJS, Gatsby, React Native and any other framework that uses React. From the moment you create the button our server will keep track of every visitor interaction without storing their personal data.

To get started you just need to signup to Lyket and get your personal public API key. It is just a matter of seconds then to start receiving feedback on your website!

Installation using React

To install the React component run

yarn add @lyket/react

or

npm install @lyket/react

Configuration

Set up the provider

The provider is in charge of loading the client that will be used to make requests to Lyket's server using your personal public API key.

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

ReactDOM.render(
  <Provider apiKey="[YOUR-API-KEY]">
    <App />
  </Provider>,
  document.getElementById('root')
);
Required props
  • apiKey: you can get your public API key by registering on lyket.dev
Optional props
  • theme: This prop allows you to provide your own style to the default theme. Read more about it in the Styling updown buttons section at the end of this article

  • recaptchaSiteKey: if you enabled reCAPTCHA you need to provide your public key. Read more at the end of this document

Create like/dislike buttons

When the React component is mounted, a fetch request is made to retrieve info about the like/dislike buttons with that certain id and namespace. If no button is found, a new resource is created with the id/namespace identifier.

Notice that the server will create a new resource for every different and unique identifier, so if you change id or namespace the new button won’t inherit the votes.

Every time a user clicks on a button, the React component will update the likes/dislikes counter and flag that the user has already voted. Visitors don't have to signup to any third party service.

Like/dislike buttons behave like Reddit buttons. Users can only like or dislike once and a subsequent call from the same user will remove the user's like or dislike. Here is an example of like/dislike button with id "do-you-enjoy-chess", namespace "post" and a Reddit-like template.

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

export default BlogPost = ({ title, content }) => {
  return (
    <div>
      {title}
      <UpdownButton
        id="do-you-enjoy-chess"
        namespace="post"
        component={UpdownButton.templates.Reddit}
      />
      {content}
    </div>
  );
};
Required like button props
  • id: The API uses the ID to determine which resource you want to interact with. It should be unique. It accepts an alphanumeric string with maximum 50 characters.
Optional props
  • namespace: Giving a namespace is useful to keep buttons organized, and can be used to fetch statistics on your buttons filtering by namespace. Check the API docs for more information.

  • hideCounterIfLessThan: You may not want to show a counter if you are not getting enough feedback. Specify the number of likes you want to receive before showing the counter.

  • component: To change the aspect of the default button you can either provide one of the ready-made templates that Lyket provides or a custom React component in the component attribute. Let's go deeper on this crucial prop.

Templates

A number of like button templates are provided to use Lyket out-of-the-box. You can see all the available options on the demo section

  • Simple: default UpdownButton - supports themes prop
  • Reddit: Reddit style UpdownButton

Import templates directly from the button component. Here is an example of using templates.

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

export default StandingOvation = () => {
  return (
    <>
      <h2>Do you like pizza?</h2>
      <UpdownButton
        id="do-you-like-pizza"
        component={UpdownButton.templates.Reddit}
      />
    </>
  );
};

Children or custom component

You may want to give a different aspect to a button, for example using your logo as icon or add a callback after a user clicks. You can do that by providing your own component!

Here are a few examples of using children for each button type. You can pass a component also through the component prop. Here is an example

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

export default Faq = () => {
  return (
    <>
      <h2>Do you like pizza?</h2>
      <UpdownButton id="do-you-like-pizza" namespace="faq" hideCounterIfLessThan=10>
        ({
          pressUp,
          pressDown,
          totalScore,
          userVoteDirection,
          isCounterVisible,
          isLoading
        }) => {
          return (
            <>
              <button onClick={pressUp} disabled={isLoading}>Of course! πŸ•πŸ•πŸ•</button>
              <button onClick={pressDown} disabled={isLoading}>I am a bad person</button>
              {isCounterVisible && <p>Total: {totalScore}</p>}
              <p>Your vote: {userVoteDirection}</p>
            </>
          )
        }
      </UpdownButton>
    </>
  )
};

Styling buttons

Resizing

Like buttons can be resized by wrapping them in a container and changing the font-size.

Applying your own theme to the default template

Lyket uses the theme-ui library, allowing you to provide your own theme to the buttons through the theme prop in the provider.

These are the default values, you can change any of these parameters by passing your own object:

const defaultTheme = {
    colors: {
      background: '#e0e0e0',
      text: '#292929',
      primary: '#22c1c3',
      secondary: '#ff00c3',
      accent: '#fcff4b',
      highlight: '#e095ed',
      muted: '#aaa',
    },
    fonts: {
      body: 'inherit',
      heading: 'inherit',
      monospace: 'inherit',
    },
    fontWeights: {
      body: 400,
      bold: 700,
    },
  };

The Provider component makes a deep merge, so you can overwrite the theme object totally or partially.

There are a few templates that support theming. Read the templates detail to know which ones.

reCAPTCHA

Lyket is integrated with Google reCAPTCHA V3 to handle malicious use without interrupting human users. To enable it you need to provide your Google reCAPTCHA secret key in the user settings in the private area and add your recaptcha site key through the recaptchaSiteKey prop in the Provider. The key will be encrypted.