1.5.0 • Published 5 years ago

with-utterances v1.5.0

Weekly downloads
8
License
MIT
Repository
github
Last release
5 years ago

React ❤️ Utterances

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!

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

Installation

npm i with-utterances
yarn 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'


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.

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

Demo Using withUtterance

1.5.0

5 years ago

1.4.1

5 years ago

1.3.1

6 years ago

1.2.1

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago