Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@joyfulelement/disqus-react

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@joyfulelement/disqus-react

Official React components to embed Disqus discussions and comments.

  • 1.0.10
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

disqus-react

npm version

A package for integrating Disqus services into React applications.

Installation

Using npm:

$ npm install --save disqus-react

Using yarn:

$ yarn add disqus-react

Usage

DiscussionEmbed

This is the component that will load the main Disqus comments section.

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.

language configuration

This configuration overrides will load the Disqus embed in different languages on a per-page basis.

Note: Depending on the completeness of the translation for a given language, and the release of language support from disqus, the strings displayed on discussion thread UI may not be completely translated.

CommentCount

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

import { CommentCount } from 'disqus-react';

<Disqus.CommentCount
    shortname='example'
    config={
        {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
        }
    }
>
    {/* Placeholder Text */}
    Comments
</Disqus.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.

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.

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.

FAQs

Package last updated on 03 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc