https://github.com/disqus/disqus-react
A React component for Disqus
https://github.com/disqus/disqus-react
comments disqus reactjs
Last synced: 12 months ago
JSON representation
A React component for Disqus
- Host: GitHub
- URL: https://github.com/disqus/disqus-react
- Owner: disqus
- License: mit
- Created: 2017-04-03T05:49:20.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-02-20T16:56:01.000Z (about 1 year ago)
- Last Synced: 2025-04-15T00:41:27.542Z (about 1 year ago)
- Topics: comments, disqus, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.72 MB
- Stars: 373
- Watchers: 13
- Forks: 46
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# disqus-react
[](https://badge.fury.io/js/disqus-react "View this package on npm")
A package for integrating [Disqus](http://disqus.com/) services into React applications.
## Installation
Using [npm](https://www.npmjs.com/):
```bash
$ npm install --save disqus-react
```
Using [yarn](https://yarnpkg.com/):
```bash
$ yarn add disqus-react
```
## Usage
### DiscussionEmbed
This is the component that will load the main Disqus comments section.
```js
import { DiscussionEmbed } from 'disqus-react';
```
This component is limited to one instance in the DOM at a time and will handle updates to both the `config` and `shortname` props and reload appropriately with the new discussion thread.
### DiscussionEmbed with SSO
This is an example for setting up the DiscussionEmbed component with SSO. This example config is also used on the Disqus React SSO example found here: https://disqus-sso-react-demo.glitch.me/.
```js
import { DiscussionEmbed } from 'disqus-react';
```
### CommentCount
This component will display the comment count for the Disqus thread associated with the provided config.
```js
import { CommentCount } from 'disqus-react';
{/* Placeholder Text */}
Comments
```
Multiple instances of this component can be included on the same page with different `config` variables (e.g. an article list showing the comment count for each).
However, all threads on the site must be under the same primary site `shortname`. If the component receives a new `shortname`, all instances will be reset with counts for threads matching the updated site.
### CommentEmbed
This component can be used to embed a Disqus comment into your page.
```js
import { CommentEmbed } from 'disqus-react';
```
Multiple instances of this component may be include on the same page with different `commentId` variables and does not require that the embedded comment be under the same primary site `shortname`.
### Recommendations
This component can be used to embed Disqus Recommendations into your page.
```js
import { Recommendations } from 'disqus-react';
```
The `config` prop is optional and is used to prevent any discussions on the current page from being included in the recommendations.
This component is limited to one instance in the DOM at a time and will handle updates to the `shortname` prop and reload appropriately with recommended pages for the new forum shortname.
## Contributing
If you'd like to contribute to this package feel free to submit a bug report, feature request, or pull request. Though we would ask that you first read through the [contributing guidelines](https://github.com/disqus/disqus-react/blob/master/docs/CONTRIBUTING.md).