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; Don't forget to replace <your commento url> with the proper URL.

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).