How to Add Comments to Your React-Powered Blog?

Published by Supun Kavinda on

Did you create your site or blog using React.js? Or, are you using a React-based framework like Gatsby or Next? Then, this guide is for you. It explains how to add comments to any react-powered blog using Hyvor Talk commenting platform.

First, what is Hyvor Talk and why?

Hyvor Talk is an embeddable, fully-functional commenting platform for any website (not only react-powered). Among the other similar options available in the market, Hyvor Talk is special due to many reasons.

  • Privacy-focused – never sell your or visitors’ data.
  • No ads/tracking placed on your site.
  • It comes with affordable pricing.
  • When considering a commenting platform for static sites, the most important factor is speed. Hyvor Talk is fast and lightweight.
  • Fully customizable. Here’s a page customized for a dark theme.
Hyvor Talk Dark Comments in react-powered blog
Hyvor Talk on a dark site

Adding Comments to Your React-Powered Site

Step 1: Register Your Website in Hyvor Talk Console

First, navigate to Hyvor Talk console. This requires a Hyvor Account, which you can create in a few minutes. After signing up, you’ll be navigated to the console. Then, fill two fields and add your website.

Add Website
Adding Website
  • Website Name – Just a simple name to recognize your site
  • Website Domain – Primary domain of your site. You can add more domains and subdomains later.

Step 2: The “React” Part

Installing Hyvor Talk on a react-powered blog can easily be done using the hyvor-talk-react library. So, let’s install it first.

npm install hyvor-talk-react

or

yarn add hyvor-talk-react

Next, we can add comments to the template files we need. In gatsby, comments are usually added to src/templates/post.js.

Import the library:

import React from 'react'
import HyvorTalk from 'hyvor-talk-react'
...

Now, add the embed in the place where you need comments.

return (
  <Global>
    ...
    <PageBody>
      ...
      <HyvorTalk.Embed websiteId={WEBSITE_ID} id={PAGE_ID} />
    </PageBody>
  </Global>
)
  • WEBSITE_ID can be taken from the General section in the Console.
  • PAGE_ID is should be unique per page/post. You can set it to slug or a unique ID. You can also omit that. In that case, the identifier will be the absolute URL of the page.

Tip: If you like to lazy load comments (load when scrolled to the comments section), add loadMode="scroll". Then, comments will only be loaded when the user scrolls down.

<HyvorTalk.Embed websiteId={WEBSITE_ID} loadMode="scroll" />

Learn more about load modes.

That’s how simple it is to add comments to your react-powered site. If you have any questions, feel free to comment below.

Resources

About Hyvor Talk

Hyvor Talk is a commenting platform for websites. It is beautiful and fully-customizable. It provides the most generous free plan in the industry (No ads shown). Wanna try out? The comments section below this post is Hyvor Talk. Feel free to post a comment there. If you like it, get it on your website for free. ❤

Categories: Uncategorized