Utterances
React ❤️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
- Done!
Installation
npm i with-utterancesyarn add with-utterances
Usage
import withUtterances
to the file which has component that you want to show utterances comment widget.
import withUtterances from 'with-utterances' Component //... // Or const PostPage = //... PostPage 'YOUR_REPO' // Or to specify a theme PostPage 'YOUR_REPO' 'github-dark' // Or to specfiy an issue term PostPage 'YOUR_REPO' 'github-light' 'og:title' // Or to specfiy label for newly created issuesPostPage 'YOUR_REPO' 'github-light' 'og:title' 'comments'
It uses your pathname as issue-term
.
Supported Themes
By default Utterances comes with 6 choices for themes:
github-light
- The normal Github stylegithub-dark
- A dark mode in the style of Githubgithub-dark-orange
- A custom dark orange mode in the style of Githubicy-dark
- A custom blue glow themedark-blue
- A custom blue and black themephoton-dark
- A custom dark grey and blue theme
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