-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #64 from disqus/update-readme
Update package documentation
- Loading branch information
Showing
4 changed files
with
85 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,87 @@ | ||
| # disqus-react | ||
| # 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. | ||
| [](https://badge.fury.io/js/disqus-react "View this package on npm") | ||
|
|
||
| Installation | ||
| ============ | ||
| A package for integrating [Disqus](http://disqus.com/) services into React applications. | ||
|
|
||
| Using NPM: | ||
| ## Installation | ||
|
|
||
| Using [npm](https://www.npmjs.com/): | ||
|
|
||
| ```bash | ||
| $ npm install --save disqus-react | ||
| ``` | ||
|
|
||
| Using [yarn](https://yarnpkg.com/): | ||
| ```bash | ||
| $ npm install disqus-react | ||
| $ 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, | ||
| } | ||
| /> | ||
| ``` | ||
|
|
||
| Basic Usage | ||
| =========== | ||
| 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. | ||
|
|
||
|
|
||
| ### CommentCount | ||
|
|
||
| On a typical article page with the comment count below the title, as well as an embedded comment and discussion below the article body. | ||
| This component will display the comment count for the Disqus thread associated with the provided config. | ||
|
|
||
| ```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> | ||
| ); | ||
| 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> | ||
| ``` | ||
|
|
||
| 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. | ||
| 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} | ||
| /> | ||
| ``` | ||
|
|
||
| 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. | ||
| 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`. | ||
|
|
||
| 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 | ||
| =========== | ||
| ## Contributing | ||
|
|
||
| Make sure that `disqusProps.config.url` must match `Website URL` found at `https://your-project-shortname.disqus.com/admin/settings/general/` | ||
| 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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters