Adding Commento to React Apps (like Gatsby)

Since I've recently replaced Disqus with Commento I thought it'd be a good idea to share how to embed a different commenting system - in our case Commento - into your Gatsby site (or React app in general).

Zero dependency component

Disqus has an official package for embedding it into React applications which I used to add Disqus to my blog. For Commento I wanted to get rid of the additional dependency; additional dependencies increase maintenance and always come with a certain amount of risk. It's not that relying on open source is a bad idea - it's just that sometimes adding a package for small things is just excessive exaggeration and not worth the price.

So I've implemented a very small component myself which is responsible for embedding Commento with less than 40 lines of code.

Since most commenting systems work the same way (by embedding a simple JavaScript file into your page) this approach should work for other systems like Isso, Schnack, Remark42, etc. too (with small adjustments).

It's a functional component which makes use of the useEffect hook to embed Commento on the desired pages. Additionally it uses two helper functions (borrowed from disqus-react) to add and remove scripts from our page.

The entire implementation is fairly easy:

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 there's no window there's nothing to do for us
    if (! window) {
      return;
    }
    const document = window.document;
    // In case our #commento container exists we can add our commento script
    if (document.getElementById('commento')) {
      insertScript(`<your commento url>/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;

Done. That was easy.

The Commento script gets added to our page as soon as the associated container (which id equals commento) is found and is re-rendered as soon as the id prop (which should be the post or page id) changes (see optimizing performance by skipping effects for further information).

We can now add comments to all pages by simply adding the <Commento id={uniquePostId} /> component to wherever we want to have comments.