https://github.com/fastcomments/fastcomments-react

A React component for FastComments
https://github.com/fastcomments/fastcomments-react

Last synced: about 2 months ago
JSON representation

A React component for FastComments

• Host: GitHub
• URL: https://github.com/fastcomments/fastcomments-react
• Owner: FastComments
• License: mit
• Created: 2020-08-09T00:27:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-01T12:34:21.000Z (about 1 year ago)
• Last Synced: 2024-04-25T18:02:01.011Z (8 months ago)
• Language: TypeScript
• Size: 10.9 MB
• Stars: 7
• Watchers: 2
• Forks: 3
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-react-components - fastcomments-react - [demo](<https://blog.fastcomments.com/(12-30-2019)-fastcomments-demo.html>) - FastComments component for embedding a live comment thread on a page or SPA. (UI Components / Miscellaneous)
• awesome-react-components - fastcomments-react - [demo](<https://blog.fastcomments.com/(12-30-2019)-fastcomments-demo.html>) - FastComments component for embedding a live comment thread on a page or SPA. (UI Components / Miscellaneous)
• fucking-awesome-react-components - fastcomments-react - [demo](<https://blog.fastcomments.com/(12-30-2019)-fastcomments-demo.html>) - FastComments component for embedding a live comment thread on a page or SPA. (UI Components / Miscellaneous)

README

        
# 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)

## Installation

### NPM

```bash

npm install --save fastcomments-react

```

### Yarn

```bash

yarn add fastcomments-react

```

## Examples

You'll find examples for various use cases (dark mode, pagination, etc) in the examples folder. Each example can be setup with `npm install` and started with `npm run start`.

## 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 

  }

}

```

### 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 

  }

}

```

### 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)