clap & like button on React

Lyket is the ultimate tool to add like buttons, applause buttons and like/dislike buttons to your React app! The library allows a great deal of customization with just a few lines of code and it's compatible with all React frameworks like NextJS, Gatsby, create-react-app.

In this page we illustrate how to work with Lyket buttons, continue on reading if you are just browsing. Navigate to the one of these pages if you want to read the detailed documentation on a certain button:

• Like buttons React documentation
• Applause button React documentation
• Like dislike buttons React documentation
• Rating component React documentation

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>

How the buttons work

All Lyket buttons share these basic behaviors and features:

• As soon as a button component is mounted, a fetch request is made to retrieve info on the button that identifies with the ID and namespace that you provided. If no button is found, a new one will be created using the ID/namespace identifier.

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

• Every time a visitor interacts with a button, the button counter will update and Lyket will flag that the visitor has voted. Lyket uses an unique random ID stored in the visitor's browser localStorage to identify the visitor, with no need to signup or to use any third party service. To disable the session ID, and therefore use only the IP address to identify a user, set the disableSessionId prop to true in the Provider component.

• Lyket enforces a maximum number of sessions IDs per IPaddress to avoid receiving too many requests or DDoS attacks. The default is 3 sessions per IP. You can change this number by logging into your private area and edit the user settings.

• In the user settings you can also specify from which domains Lyket should accept requests using your personal API key. If left empty Lyket will accept requests coming from all domains.

Installation

Well, Let's get started! To install the component run

yarn add @lyket/react

or

npm install @lyket/react

Add Lyket to your app

Add the Provider component top-level and configure it using your personal public API key that you can get after registering to Lyket

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

ReactDOM.render(
  <Provider apiKey="[YOUR-API-KEY]">
    <App />
  </Provider>,
  document.getElementById('root')
);

Required props

• apiKey: string - You can get your public API key by registering on Lyket.

Optional props

• theme: Record<'colors' | 'fonts' , Record<string, string>> - Allows you to change the default buttons colors and fonts. It doesn't apply to all templates. Read more about it in the Styling buttons section at the end of this document.

• recaptchaSiteKey: string - If you enabled reCAPTCHA in the private area's user settings, you need to provide your reCAPTCHA public key, otherwise your buttons will result as unauthorized. Read more in the reCAPTCHA section at the end of this document.

• disableSessionId: boolean Default: false - If set to true Lyket won't store a unique session ID for your visitors making them anonymous. Lyket will then discriminate visitors (to tell if they already liked a button or not) only based on the IP address. Disabling the session ID can be useful if you don't want Lyket to result in your cookie detection software.

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

export StandingOvation = () => {
  return (
    <>
      <h4 id="Do you like pizza?">Do you like pizza?</h4>
      <LikeButton
        id="do-you-like-pizza"
        component={ClapButton.templates.Twitter}
      />
    </>
  );
};

Like Button

Like buttons behave like Twitter like buttons.

Visitors can only like once and a subsequent request from the same visitor will remove the visitor's like.

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

export BlogPost = ({ title, content }) => {
  return (
    <div>
      {title}
      <LikeButton
        id="how-to-reduce-footprint"
        namespace="post"
      />
      {content}
    </div>
    );
  };

Optional props

• onPress: (buttonData: LikeButtonData) => void - This function gets called whenever a Press action is triggered.

LikeButtonData

• id: string
• type: "like_button"
• attributes: Object
  • namespace: string
  • namespaceRank: number
  • totalLikes: number
  • totalRank: number
  • totalVotes: number
  • userLiked: boolean

Like/Dislike Button

Up/down buttons behave like Reddit like/dislike buttons.

Visitors can only like or dislike once and a subsequent action from the visitor will remove the visitor's like or dislike.

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

export BlogPost = ({ title, content }) => {
  return (
    <div>
      {title}
      <UpdownButton
        id="how-i-joined-the-raiders-of-the-lost-ark"
        namespace="post"
      />
      {content}
    </div>
  );
};

Optional props

• onPressUp: (buttonData: UpdownButtonData) => void - This function gets called whenever a PressUp action is triggered.

• onPressDown: (buttonData: UpdownButtonData) => void - This function gets called whenever a PressDown action is triggered.

UpdownButtonData:

• id: string
• type: "updown_button"
• attributes: Object
  • namespace: string
  • namespaceRank: number
  • totalScore: number
  • totalRank: number
  • totalVotes: number
  • userVoteDirection: -1 | 0 | 1

Clap Button

Clap buttons behave like Medium applauses.

Visitors can like multiple times and every other call from the same visitor will increment the claps number indefinitely.

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

export BlogPost = ({ title, content }) => {
  return (
    <div>
      {title}
      <ClapButton id="diy-fish-holder" namespace="post" />
      {content}
    </div>
  );
};

Optional props

• onPress: (buttonData: ClapButtonData) => void - This function gets called whenever a Press action is triggered.

ClapButtonData:

• id: string
• type: "clap_button"
• attributes: Object
  • namespace: string
  • namespaceRank: number
  • totalClaps: number
  • totalRank: number
  • userClaps: number

Custom Buttons

You may want to give a different flavour to a button, for example using your company logo as the icon. You can do that by creating your own custom button!

Here is an example for each button type of using a custom component by passing it as "children". You can pass a custom component also through the component prop.

Custom Like Button

The clap button component allows you to customize the look and feel of your button, like changing the icon, show or hide the counter and so on. These are the available props:

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

export Faq = () => {
  return (
    <>
      <h4 id="Do you like pizza?">Do you like pizza?</h4>
      <LikeButton
        id="do-you-like-pizza"
        namespace="faq"
        hideCounterIfLessThan={1}
      >
        {({
          handlePress,
          totalLikes,
          userLiked,
          isLoading,
          isCounterVisible
        }) => (
          <>
            <button onClick={handlePress} disabled={isLoading}>
              🍕
            </button>
            {isCounterVisible && <div>Total: {totalLikes}</div>}
            {userLiked && <div>Great! I like pizza as well!</div>}
          </>
        )}
      </LikeButton>
    </>
  )
};

Custom ClapButton

The clap button component allows you to customize the look and feel of your button, like changing the icon, show or hide the counter and so on. These are the available props:

• handlePress: (buttonData: ClapButtonData) => void
• totalClaps: number
• userClaps: number
• isLoading: boolean
• isCounterVisible: boolean

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

export Faq = () => {
  return (
    <>
      <h4 id="Do you like pizza?">Do you like pizza?</h4>
      <ClapButton
        id="do-you-like-pizza"
        namespace="faq"
        hideCounterIfLessThan={3}
      >
        {({
          handlePress,
          totalClaps,
          userClaps,
          isLoading,
          isCounterVisible,
        }) => (
          <>
            <button onClick={handlePress} disabled={isLoading}>
              👏
            </button>
            {isCounterVisible && <div>Total: {totalClaps}</div>}
            <div>You clapped {userClaps} times</div>
          </>
        )}
      </ClapButton>
    </>
  );
};

Custom Like/Dislike Button

Like/dislike component allows you to customize the look and feel of your button, like changing the icon, show or hide the counter and so on. These are the available props:

• handlePressUp: (buttonData: ClapButtonData) => void
• handlePressDown: (buttonData: ClapButtonData) => void
• totalClaps: number
• userClaps: number
• isLoading: boolean
• isCounterVisible: boolean

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

export Faq = () => {
  return (
    <>
      <h4 id="Do you like pizza?">Do you like pizza?</h4>
      <UpdownButton
        id="do-you-like-pizza"
        namespace="faq"
        hideCounterIfLessThan={1}
      >
        {({
          handlePressUp,
          handlePressDown,
          totalScore,
          userVoteDirection,
          isCounterVisible,
          isLoading,
        }) => (
          <>
            <button onClick={handlePressUp} disabled={isLoading}>
              + 🍕
            </button>
            <button onClick={handlePressDown} disabled={isLoading}>
              - 🍕
            </button>
            <div>Total votes: {totalScore}</div>
            <div>
              {
                userVoteDirection > 0
                ? ":D"
                : userVoteDirection === 0
                ? "I am waiting for you to vote..."
                : ":("
              }
            </div>
          </>
        )}
      </UpdownButton>
    </>
  );
};

Style your the button templates

Resizing

All button templates can be resized by wrapping them in a container and changing the font-size.

Apply your color scheme and fonts

Lyket uses the theme-ui library, allowing you to provide your own color palette to the buttons through the theme prop in the provider. Colors support rgba, hex, and color names.

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>
  

Button colors

• primary - Changes the background color of the "like" button, when user has liked.
• secondary - Changes the background color of the "dislike" button, when user has disliked.
• background - Changes the background color of the inactive button.
• text - Changes the counter text color.
• icon - Changes the icon's color.
• highlight - Changes the animation color.

Button fonts

• body - Changes counter font.

These are the default values:

const defaultTheme = {
  colors: {
    primary: '#22c1c3',
    secondary: '#ff00c3',
    background: 'transparent',
    text: '#292929',
    highlight: '#e095ed',
    icon: '#292929',
  },
  fonts: {
    body: 'inherit',
  },
};

Button Templates

Browse our templates gallery to choose your favourite template!

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.

In this way each time a user interacts with a button an "invisible" reCAPTCHA check will be performed, keeping your website safe.

Be aware that if you only set reCAPTCHA secret key in the user settings while not passing the reCAPTCHA site key in your Provider, the buttons won't work.