DEV Community


Posted on • Originally published at on


Adding Commento to React Apps (like Gatsby)

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; = id;

  return script;

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

// The actual component
const Commento = ({id}) => {
  useEffect(() => {
    // If there's no window there's nothing to do for us
    if (! window) {
    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).

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

If you liked this post feel free to leave a ❤, follow me on Twitter and subscribe to my newsletter. This post was originally published at on September 2, 2019.

Top comments (1)

gabymarraro profile image

Thanks for this! I am trying to find a workaround for Commento where I have multiple instances on one page. I have an infinite scroll list of articles, and I want each one to have its own instance. Do you think this code would work for that? It seems like I could use this to give each div its own unique ID, and target the script based on that ID.

Who's your favorite PM?

We're Hiring for one!

We're looking for someone who can develop, maintain, and implement our product roadmap and strategy as a Senior Product Manager.

Head here to learn more about who we're looking for.