You may notice that if you scroll to the bottom of any blog post on my site, you will see a section that asks you if you like this post and if you do to give it some claps. This isn't something you see very often but it is easier than you think.

Personally, I chose to use Lyket, a great bit of indie development. It supports React, HTML and WordPress so perfect for all the cases you might need.

The Setup

For a React based blog you just need a single package,@lyket/react and you are ready to start adding claps to your website.

Next you need to signup for your Lyket account which can be found athttps://lyket.dev . Once you signed up grab thePublic API token from the settings.

Wrap our _app.js

Now that we have all the required pieces, we can wrap our application in a provider so we can use it with Lyket. First you need to importProvider from Lyket but instead of importing asProvider let's useLyketProvider .

import { Provider as LyketProvider} from “@lyket/react”

Now we need to wrap our application in this provider and pass in our API token so Lyket can know which account to use.

Your_app.js should look similar to the following:

import '../styles/index.css'import { Provider as LyketProvider} from “@lyket/react”export default function MyApp({ Component, pageProps }) {  return (    <LyketProvider apiKey="[YOUR-API-KEY]">      <Component {...pageProps} />    </LyketProvider>  );}

Using Lyket on a page.

Lyket is now available on any page we want. Open up the page you want to use Lyket on and add the follow importimport { ClapButton } from '@lyket/react'; then we can use this component wherever we want. For example:

import { ClapButton } from '@lyket/react';export BlogPost = ({ title,slug, content }) => {  return (    <div>      {title}      <ClapButton id={slug} namespace="blog-posts" />      {content}    </div>  );};

That is it, now your readers can clap when they love your post. Give it a shot below!