# disqus-react

> Official React components to embed Disqus discussions and comments.

Latest version **1.1.7** (published 2025-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install disqus-react
pnpm add disqus-react
yarn add disqus-react
bun add disqus-react
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2025-07-07 |
| First published | 2017-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 128.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 372 |
| Author | Ryan Valentin |
| Maintainers | disqus-oss, tail, chrisjtang, astarostin |

## Links

- npm: https://www.npmjs.com/package/disqus-react
- Repository: https://github.com/disqus/disqus-react
- Homepage: https://github.com/disqus/disqus-react#readme
- Issues: https://github.com/disqus/disqus-react/issues
- npm.io page: https://npm.io/package/disqus-react

## Recent versions

- 1.1.7 (latest) — 2025-07-07
- 1.1.6 — 2025-02-20
- 1.1.5 — 2022-10-13
- 1.1.4 — 2022-10-10
- 1.1.3 — 2022-05-02
- 1.1.2 — 2021-08-24
- 1.1.1 — 2021-06-26
- 1.1.0 — 2021-06-16
- 1.0.11 — 2021-01-25
- 1.0.10 — 2020-09-01
- 1.0.9 — 2020-06-17
- 1.0.8 — 2020-03-26
- 1.0.7 — 2019-09-12
- 1.0.6 — 2019-06-28
- 1.0.5 — 2018-03-05
- … 5 more at https://npm.io/package/disqus-react/versions

## README

# disqus-react  

[![npm version](https://badge.fury.io/js/disqus-react.svg)](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';

<DiscussionEmbed
    shortname='example'
    config={
        {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
            language: 'zh_TW' //e.g. for Traditional Chinese (Taiwan)	
        }
    }
/>
```

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.  Access to SSO is currently available as an add-on for users with a Business level subscription.  This example config is also used on the [Disqus React SSO example](https://disqus-sso-react-demo.glitch.me/), and more information about SSO can be found in [our SSO documentation](https://help.disqus.com/customer/en/articles/1717160-integrating-single-sign-on).

Note: The `config.sso` object is not required for publishers integrating SSO only because `config.sso` is only used when the SSO login is present alongside the Disqus login.

```js
import { DiscussionEmbed } from 'disqus-react';

<DiscussionEmbed
    shortname='example'
    config={
        {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
            language: 'zh_TW',
            remoteAuthS3: '', // Generated by your server (see https://help.disqus.com/customer/en/articles/1717160-integrating-single-sign-on for more details)
            apiKey: '', // Your Disqus API key that can be generated or referenced at https://disqus.com/api/applications/
            sso: {
                name: 'SampleNews',
                button: 'http://example.com/images/samplenews.gif',
                icon: 'http://example.com/favicon.png',
                url: 'http://example.com/login/',
                logout: 'http://example.com/logout/',
                profile_url: 'http://example.com/profileUrlTemplate/{username}',
                width: '800',
                height: '400',
            }
        }
    }
/>
```

### CommentCount  

This component will display the comment count for the Disqus thread associated with the provided config.  

```js
import { CommentCount } from 'disqus-react';

<CommentCount
    shortname='example'
    config={
        {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
        }
    }
>
    {/* Placeholder Text */}
    Comments
</CommentCount>
```

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';

<CommentEmbed
    commentId={this.props.article.featuredCommentId}
    showMedia={true}
    showParentComment={true}
    width={420}
    height={320}
/>
```

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';

<Recommendations 
    shortname='example'
    config={
        {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
        }
    }
/>

```
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).

---
_Source: https://npm.io/package/disqus-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._