Skip to content
A React component for Disqus
JavaScript
Branch: master
Clone or download
tterb Merge pull request #35 from disqus/modify-component-update-condition
Fix #34: Modify shouldComponentUpdate condition
Latest commit 9bafb70 Aug 10, 2019

README.md

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:

$ 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.

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.

You can’t perform that action at this time.