# disqus-react-sso

> Official React components to embed Disqus discussions and comments.

Latest version **1.0.7** (published 2020-02-20) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 25/100 (F)** — status: abandoned.

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2020-02-20 |
| First published | 2020-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 273.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ryan Valentin |
| Maintainers | movahedan |

## Links

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

## Recent versions

- 1.0.7 (latest) — 2020-02-20

## README

# disqus-react

disqus-react is a component for integrating the Disqus comments embed and comment count into a React.js single-page application. All components support live reloads when new prop data is received.

Installation
============

Using NPM:

```bash
$ npm install disqus-react
```

Basic Usage
===========

On a typical article page with the comment count below the title, as well as an embedded comment and discussion below the article body.

```js
import React from 'react';
import Disqus from 'disqus-react';
// Alternatively, import specific members:
// import { DiscussionEmbed, CommentCount, CommentEmbed } from 'disqus-react';

class Article extends React.Component {
    render() {
        const disqusShortname = 'example';
        const disqusConfig = {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
        };

        return (
            <div className="article">
                <h1>{this.props.article.title}</h1>
                <Disqus.CommentCount shortname={disqusShortname} config={disqusConfig}>
                    Comments
                </Disqus.CommentCount>
                
                <p>{this.props.article.body}</p>
                
                <Disqus.CommentEmbed 
                    commentId={this.props.article.featuredComment}
                    showMedia={true}
                    height={160}
                />
                
                <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
            </div>
        );
    }
}
```

The `<DiscussionEmbed />` component is limited to one instance in the entire DOM at a time. If multiple are included, only one will be loaded. The component will handle updates to both the `config` and `shortname` props and reload appropriately with the new discussion thread.  

The `<CommentCount />` component may include multiple instances on the same page with different `config` variables (e.g. an article list showing the comment count for all). 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.  

The `<CommentEmbed />` component may include multiple instances on the same page with different `commentId` variables. Additionally, this component does not require that the embedded comment be under the same primary site `shortname`.  

Troubleshooting
===========

Make sure that `disqusProps.config.url` must match `Website URL` found at `https://your-project-shortname.disqus.com/admin/settings/general/`

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