diff --git a/.github/ISSUE_TEMPLATE/question_template.md b/.github/ISSUE_TEMPLATE/question_template.md index 2d249d6..9dba305 100644 --- a/.github/ISSUE_TEMPLATE/question_template.md +++ b/.github/ISSUE_TEMPLATE/question_template.md @@ -3,3 +3,5 @@ name: Question about: Ask a question about the package --- + + diff --git a/README.md b/README.md index 6cff0ff..82026de 100644 --- a/README.md +++ b/README.md @@ -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. +[![npm version](https://badge.fury.io/js/disqus-react.svg)](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'; + + ``` -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 ( -
-

{this.props.article.title}

- - Comments - - -

{this.props.article.body}

- - - - -
- ); +import { CommentCount } from 'disqus-react'; + + + {/* Placeholder Text */} + Comments + ``` -The `` 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'; + + +``` -The `` 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 `` 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). diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 6d3318a..2bf84f5 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,16 @@ # Change Log +## [1.0.8](https://github.com/disqus/disqus-react/releases/tag/1.0.7) + * Updated package documentation + * Added support for rest props to `DiscussionEmbed` + * Added config params for SSO + * Added support for additional callbacks + * Added PropType validation for components + * Updated package dependencies + * Replaced deprecated React v17.x lifecycle methods + +---- + ## [1.0.7](https://github.com/disqus/disqus-react/releases/tag/1.0.7) * Added shallow comparison to `shouldComponentUpdate` to fix #34 * Added "Troubleshooting" section to README.md diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 9156a14..85e855e 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -51,7 +51,7 @@ Before creating bug reports, please check [this list](#before-submitting-a-bug-r #### Before Submitting A Bug Report -* **Check the [FAQs on the forum](https://help.disqus.com/en/)** for a list of common questions and problems. +* **Check the [FAQ](https://github.com/disqus/disqus-react/wiki/Frequently-Asked-Questions)** for a list of common questions and problems. * **Perform a [cursory search](https://github.com/disqus/disqus-react/issues?utf8=%E2%9C%93&q=is%3Aissue)** to see if the problem has already been reported. If it has **and the issue is still open**, add a comment to the existing issue instead of opening a new one. #### How Do I Submit A (Good) Bug Report? @@ -114,22 +114,8 @@ While the prerequisites above must be satisfied prior to having your pull reques ### JavaScript Styleguide -All JavaScript must adhere to [JavaScript Standard Style](https://standardjs.com/). +All JavaScript must adhere to the included [ESlint config](https://github.com/disqus/disqus-react/blob/master/.eslintrc.yaml) -* Prefer the object spread operator (`{...anotherObj}`) to `Object.assign()` -* Inline `export`s with expressions whenever possible - ```js - // Use this: - export default class ClassName { - - } - - // Instead of: - class ClassName { - - } - export default ClassName - ``` * Place requires in the following order: * Built-in Node Modules (such as `path`) * Built-in Modules