Integrate Commento.io Comments with Gatsby

Commento is a lightweight, privacy-first comments system (think Disqus but 15KB in size), and it's the one powering comments on this blog.

After doing some research I decided it was the best option for my Gatsby based blog, and have written a small script to use it with Gatsby.

The Code

Copy the below file to src/components/commento.js

import React, { useEffect } from "react"

// Helper to add scripts to our page
const insertScript = (src, id, parentElement) => {
  const script = window.document.createElement("script")
  script.async = true
  script.src = src
  script.id = id
  parentElement.appendChild(script)
  return script
}

// Helper to remove scripts from our page
const removeScript = (id, parentElement) => {
  const script = window.document.getElementById(id)
  if (script) {
    parentElement.removeChild(script)
  }
}

// The actual component
const Commento = ({ id }) => {
  useEffect(() => {
    if (!window) {
      return
    }

    const document = window.document

    // In case our #commento container exists we can add our commento script
    if (document.getElementById("commento")) {
      insertScript(
        `https://cdn.commento.io/js/commento.js`,
        `commento-script`,
        document.body
      )
    }

    // Cleanup; remove the script from the page
    return () => removeScript(`commento-script`, document.body)
  }, [id])
  return <div id={`commento`} />
}

export default Commento

Then to embed it in your blog add the following import to the top of your blog file:

import Commento from "../components/commento"

And add this to wherever you want to display the comments:

<Commento id={data.strapiArticles.id} />

The ID field is optional but recommended, pass it a value that's unique to your post for the comments to be bound to. You can see I pass the the ID of my article.