# fastcomments-react

> A React library for FastComments, a fast and developer friendly comment system.

[![NPM](https://img.shields.io/npm/v/fastcomments-react.svg)](https://www.npmjs.com/package/fastcomments-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## AI coding agents

[![skills.sh](https://skills.sh/b/fastcomments/skills)](https://skills.sh/fastcomments/skills)

Give your coding agent the FastComments context it needs - widgets, configuration, Secure SSO, the REST API, and the SDKs:

```bash
npx skills add fastcomments/skills
```

Works with Claude Code, Codex, Cursor, Copilot, Gemini, and every other agent the [skills CLI](https://github.com/vercel-labs/skills) supports.

## Live Demo

Try every widget live at <https://fastcomments.com/commenting-system-for-react/>.

## Installation

[![npm](https://img.shields.io/npm/v/fastcomments-react?logo=npm&label=npm&color=cb3837)](https://www.npmjs.com/package/fastcomments-react)

### NPM

```bash
npm install --save fastcomments-react
```

### Yarn

```bash
yarn add fastcomments-react
```

## Live Showcase

To see every widget and flow running locally against the public `demo` tenant, clone the repo and run:

```bash
npm install
npm run build
cd examples/example-showcase
npm install
npm run dev
```

The examples link to the library via `file:../..`, so the root `npm run build` step is needed once to produce `dist/`.

Each widget/flow has its own view under `examples/example-showcase/src/views/` that you can copy straight into your own React app.

## Examples

Individual use cases (dark mode, pagination, etc.) live in their own folders under `examples/`. Each can be set up with `npm install` and started with `npm run dev` (Vite).

## Usage

### The Main Widget Component

The FastCommentsCommentWidget component contains the live FastComments comment widget.

Replace "demo" below with your "tenantId" - available [here](https://fastcomments.com/auth/my-account/api) in the FastComments admin area.

The widget supports a lot of options - see FastCommentsCommentWidgetConfig in src/index.tsx.

```tsx
import React, { Component } from 'react'

import {FastCommentsCommentWidget} from 'fastcomments-react'

class Example extends Component {
  render() {
    return <FastCommentsCommentWidget tenantId="demo" />
  }
}
```

### Updating The Current Page (For SPAs)
To update the page/article the comment thread is tied to you must update the configuration parameters "urlId" and "url".
See the example and explanation [here](https://github.com/FastComments/fastcomments-react/blob/master/examples/example-paginated/src/PaginatedApp.tsx).

### Account Region (ATTENTION: EU Customers)

If you're in the EU, you'll want to tell the client widgets what region you are in. See [examples/example-eu](/examples/example-eu/src/App.tsx);
Otherwise, you do not have to define `region`.

### The Comment Count Widget

The FastCommentsCommentCountWidget component contains the live FastComments comment count widget.

Replace "demo" below with your "tenantId" - available [here](https://fastcomments.com/auth/my-account/api) in the FastComments admin area.

See FastCommentsCommentCountConfig in src/index.tsx for the supported configuration options.

```tsx
import React, { Component } from 'react'

import {FastCommentsCommentCountWidget} from 'fastcomments-react'

class Example extends Component {
  render() {
    return <FastCommentsCommentCountWidget tenantId="demo" urlId="https://example.com/some-page-or-id" />
  }
}
```

### Native

For a completely native implementation of FastComments, see [fastcomments-react-native-sdk](https://github.com/FastComments/fastcomments-react-native-sdk).

For a React Native wrapper of this library, using a webview, see [fastcomments-react-native](https://github.com/FastComments/fastcomments-react-native).

## Contributing
Please check out our [contribution guidelines](CONTRIBUTING.md) before starting on a change. Remember to communicate first!

## License

MIT © [winrid](https://github.com/winrid)

## Maintenance Status

These components are wrappers around our core VanillaJS components. We can automatically update these components (fix bugs, add features) without publishing this library, so while it may not be published for a while that does not mean FastComments is not under active development! Feel free to check [our blog](https://blog.fastcomments.com/) for updates. Breaking API changes or features will never be shipped to the underlying core library without a version bump in this library.