Adding Commento to React Apps (like Gatsby)
Tags: react, gatsby
Published: 2019-09-05 09:18:55

---
title: Adding Commento to React Apps (like Gatsby)
published: true
tags: React,Gatsby
canonical_url: https://nehalist.io/adding-commento-to-react-apps-like-gatsby/
---

 ![Adding Commento to React Apps (like Gatsby)](https://ghost.nehalist.io/content/images/2019/09/commento-guide-1.png)

Since I've recently replaced [Disqus with Commento](https://nehalist.io/no-more-disqus-hello-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](https://github.com/disqus/disqus-react) 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](https://blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident). It's not that relying on open source is a bad idea - it's just that sometimes adding [a package for small things](https://www.npmjs.com/package/isarray) 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](https://posativ.org/isso/), [Schnack](https://schnack.cool/), [Remark42](https://remark42.com/), 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](https://github.com/disqus/disqus-react/blob/master/src/utils.js#L3)) to add and remove scripts from our page.

The entire implementation is fairly easy:

```jsx
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](https://reactjs.org/docs/hooks-effect.html#tip-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](https://twitter.com/nehalist) and subscribe to [my newsletter](https://nehalist.io/newsletter). This post was originally published at [nehalist.io](https://nehalist.io/adding-commento-to-react-apps-like-gatsby) on September 2, 2019.