React GitHub Comments Utterances
React GitHub Comments Utterances uses withUtterances React npm module. Built with React Hooks and Love
Why use withUtterances as utterances
Lets say all your users are developers and already have a GitHub account so they don’t need to sign up for yet another 3rd party service like Disqus (which will also track their every move through the web 😈) Unlike Staticman that I am using for my Reviews, GitHub Issues are truly dynamic so new comments will show without having to wait for your site to rebuild and deploy You get access to all the features of GitHub Issues out of the box (notifications, moderation, reactions, etc.) Developers care about the appearance of their GitHub accounts, which is likely to result in better (or at least civil) discussion. It’s free and open source!
If your users are more privacy-minded then Disqus may not be the right fit. Software developers, for example, are extremely privacy conscious. As my blog is aimed at other software developers I use Utterances as a comment system. However, remember that your readers will need a GitHub account to leave a comment using Utterances so if your target audience do not work (or play!) within the tech industry this will not be the comment system for you.
❤️ WithUtterances is a React Higher-Order-Component for Super LightWeight Comments Widget named Utterances.
No need Duplicated DOM Bindings for each react component
Just Wrap It
import withUtterances from 'with-utterances'
- Wrap your react component
- Pass your repo as a String
It uses your pathname as
By default Utterances comes with two choices for themes:
github-light- The normal GitHub style
github-dark- A dark mode in the style of GitHub
More themes can be added with additional stylesheets.
Supported Issue Terms
pathname- Issue title which contains the path of the current page.
url- Issue title which contains the URL of the current page.
title- Issue title which contains the tab title of the current page.
og:title- Issue title which contains the Open Graph title meta.
<serach term>- Issue title which contains the given String.
PS. preload and prefetch Applied
It will make your Utterances Widget to load slightly faster. <3
PS. DEMO SITE
My withUtterances react Component
Using GitHub pages dark theme. From the SEO component, ‘og:title’, to set the comment to a specific page. And this component with the specific meta-tags can be used, ‘anywhere’, not just posts!
Or not using withUtterances npm module
Issues total count button
You could add a issues total count button which links to your repo page issues.
Then you can go to Button github.io to configure your buttons.
My new trick to get around window or .document module errors, which this ‘react-github-btn’ is an offending npm module is to…
First call the offending Module
Then tell React that,
window !== undefined.
The Component for the issues button
If you are a developer and use React this is a cool and logical way to have comments.
In my next post I will tie this component to Google Analytics as GitHub Issues.