React ❤️ Utterances

WithUtterances is a React Higher-Order-Component for Super LightWeight Comments Widget named Utterances.

$3

#### Just Wrap It!

1. import withUtterances from 'with-utterances'
2. Wrap your react component
3. Pass your repo as a String
4. Done!

$3

``sh
npm i with-utterances
yarn add with-utterances
`

$3

import withUtterances to the file which has component that you want to show utterances comment widget.

`jsx
import withUtterances from 'with-utterances'


class PostPage extends React.Component {
//...
}

// Or

const PostPage = () => {
//...
}

export default withUtterances(PostPage, 'YOUR_REPO')

// Or to specify a theme

export default withUtterances(PostPage, 'YOUR_REPO', 'github-dark')

// Or to specfiy an issue term

export default withUtterances(PostPage, 'YOUR_REPO', 'github-light', 'og:title')


// Or to specfiy label for newly created issues
export default withUtterances(PostPage, '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 style
- github-dark - A dark mode in the style of Github
- github-dark-orange - A custom dark orange mode in the style of Github
- icy-dark - A custom blue glow theme
- dark-blue - A custom blue and black theme
- photon-dark - A custom dark grey and blue theme

More themes can be added with additional stylesheets.

$3

- 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.
- ` - Issue title which contains the given String.

$3

It will make your Utterances Widget to load slightly faster. <3

$3

Demo Using withUtterance