Utterances-react-component NPM

npm download

GitHub (Pre-)Release Date npm type definitions

React component for utterances 🔮

Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more.

:sparkles: Features

:books: Pure TypeScript and TSX and provides type definition
:earth_americas: Multiple modules, providing ES modules and Commonjs
:package: Optimized, super slim size

:zap: Quick view

import { Utterances } from 'utterances-react-component'
;<Utterances
  repo="TomokiMiyauci/utterances-component"
  theme="github-dark"
  issueTerm="pathname"
/>

:dizzy: Install

:package: Node.js

npm i utterances-react-component
or
yarn add utterances-react-component

:globe_with_meridians: Browser

The module that bundles the dependencies is obtained from skypack.

import like this:

import { Utterances } from 'https://cdn.skypack.dev/utterances-react-component'

peerDependency

package	version
`react`	`^16` \| `^17` \| `^18`
`react-dom`	`^16` \| `^17` \| `^18`

:memo: API

Props

It has a strict type definition. No default value is set to respect the original behavior.

Official document

Name	Type	Description
`repo`	`${String}/${String}`	Repository for Utterances to connect to. Expected value: `username/repo`
`theme`	`Theme`	The Utterance theme.
`label`	`string?`	Choose the label that will be assigned to issues created by Utterances.
`issueTerm`	`Term` \| `string[]`1	The mapping between blog posts and GitHub issues. One of them2
`issueNumber`	`number`	You configure Utterances to load a specific issue by number. Issues are not automatically created.

declare type Theme =
  | 'github-light'
  | 'github-dark'
  | 'preferred-color-scheme'
  | 'github-dark-orange'
  | 'icy-dark'
  | 'dark-blue'
  | 'photon-dark'
  | 'boxy-light'
declare type Term = 'pathname' | 'url' | 'title' | 'og:title'