utterances-react-component
Type safety react component for utterances
[](https://github.com/TomokiMiyauci/utterances-react-component/actions/workflows/test.yml)
[](https://github.com/TomokiMiyauci/utterances-react-component/releases)
[](https://david-dm.org/TomokiMiyauci/utterances-react-component)
[](https://codecov.io/gh/TomokiMiyauci/utterances-react-component)
[](https://www.codacy.com/gh/TomokiMiyauci/utterances-react-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=TomokiMiyauci/utterances-react-component&utm_campaign=Badge_Grade)
[](./LICENSE)
[](https://app.fossa.com/projects/custom%2B26231%2Fgithub.com%2FTomokiMiyauci%2Futterances-component?ref=badge_small)
---
React component for [utterances](https://utteranc.es/) 🔮
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
```tsx
import { Utterances } from 'utterances-react-component'
;
```
## :dizzy: Install
### :package: Node.js
```bash
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](https://www.skypack.dev/view/utterances-react-component).
import like this:
```tsx
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](https://utteranc.es/)
| 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](#1) | The mapping between blog posts and GitHub issues. One of them[2](#2) | |
| `issueNumber` | `number` | You configure Utterances to load a specific issue by number. Issues are not automatically created. |
---
```ts
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'
```
###### 1
If you chose "Issue title contains specific term", specify the specific term as string array.
###### 2
`issueTerm` and `issueNumber` are exclusive. TypeScript will prompt you to specify one or the other.
## :handshake: Contributing
Contributions, issues and feature requests are welcome!
Feel free to check
[issues](https://github.com/TomokiMiyauci/utterances-component/issues).
## :seedling: Show your support
Give a ⭐️ if this project helped you!
## :bulb: License
Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci).
Released under the [MIT](./LICENSE) license
[](https://app.fossa.com/projects/custom%2B26231%2Fgithub.com%2FTomokiMiyauci%2Futterances-component?ref=badge_large)