0%
August 12, 2021

Disqus Comment Plug-in in React

react

Contents

Procedures

Go to https://disqus.com/, click get started, and go along until you get your link to embed disqus's javascript into your site, which is something like

https://short-name.disqus.com/embed.js

We can either embed the comment plug-in manually, or directly install a nice wrapper from here.

In either case, we need to reload the script in order to get a new thread connecting to disqus whenever we change our article, therefore we need the following:

const prevId = useRef<string>("");

useEffect(() => {
  const sameAsPrevId = prevId.current === activeArticle?.id;

  if (sameAsPrevId) {
    return;
  }

  (Window as any).DISQUS?.reset({
    reload: true,
    config: function () {
      this.page.identifier =
        process.env["REACT_APP_WEB_HOST"] + activeArticle.id;
      this.page.url = process.env["REACT_APP_WEB_HOST"] + activeArticle.id;
    },
  })(function () {
    var d = document;
    var s = d.createElement("script");
    s.src = "https://c-c-lee-blog.disqus.com/embed.js";
    s.async = true;
    s.setAttribute("data-timestamp", new Date() + "");
    (d.head || d.body).appendChild(s);
  })();

  prevId.current = activeArticle.id;
}, [activeArticle]);

Part of the code is taken directly from the instruction of disqus when you get start.

Potential Traps

By experiment, in (Window as any).DISQUS?.reset we need to change both

  • this.page.identifier and
  • this.page.url. These parameters are consistent with what we put into the props of DiscussionEmbed:
import { DiscussionEmbed } from "disqus-react";

<DiscussionEmbed
  shortname={"c-c-lee-blog"}
  config={{
    url: process.env["REACT_APP_WEB_HOST"] + activeArticle.id,
    identifier: process.env["REACT_APP_WEB_HOST"] + activeArticle.id,
    title: activeArticle.title,
    language: "en_us",
  }}
/>;

Just need to be careful about the number of times the component rerender, which may be a trap that courses troubles. If it happens that the component rendered twice, problem would occur when the "reload" action is first dispatched with the old identifier.

Happy blogging.

References