Type safety react component for utterances
React component for utterances 🔮
Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more.
- 📚 Pure TypeScript and TSX and provides type definition
- 🌎 Multiple modules, providing
ES modules
andCommonjs
- 📦 Optimized, super slim size
import { Utterances } from 'utterances-react-component'
;<Utterances
repo="TomokiMiyauci/utterances-component"
theme="github-dark"
issueTerm="pathname"
/>
npm i utterances-react-component
or
yarn add utterances-react-component
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
|
It has a strict type definition. No default value is set to respect the original behavior.
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'
If you chose "Issue title contains specific term", specify the specific term as string array.
issueTerm
and issueNumber
are exclusive. TypeScript will prompt you to specify one or the other.
Contributions, issues and feature requests are welcome!
Feel free to check
issues.
Give a ⭐️ if this project helped you!
Copyright © 2021-present TomokiMiyauci.
Released under the MIT license