{"id":17859188,"url":"https://github.com/disqus/disqus-react","last_synced_at":"2025-05-14T18:05:05.177Z","repository":{"id":38886287,"uuid":"87042265","full_name":"disqus/disqus-react","owner":"disqus","description":"A React component for Disqus","archived":false,"fork":false,"pushed_at":"2025-02-20T16:56:01.000Z","size":1807,"stargazers_count":373,"open_issues_count":23,"forks_count":46,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-15T00:41:27.542Z","etag":null,"topics":["comments","disqus","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/disqus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-03T05:49:20.000Z","updated_at":"2025-03-29T02:58:43.000Z","dependencies_parsed_at":"2025-03-10T14:48:15.917Z","dependency_job_id":"9ad7c8e3-72dc-4607-b16e-3c67d303524b","html_url":"https://github.com/disqus/disqus-react","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/disqus%2Fdisqus-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/disqus%2Fdisqus-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/disqus%2Fdisqus-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/disqus%2Fdisqus-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/disqus","download_url":"https://codeload.github.com/disqus/disqus-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198514,"owners_count":22030965,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comments","disqus","reactjs"],"created_at":"2024-10-28T06:03:26.918Z","updated_at":"2025-05-14T18:05:00.168Z","avatar_url":"https://github.com/disqus.png","language":"JavaScript","readme":"# disqus-react  \n\n[![npm version](https://badge.fury.io/js/disqus-react.svg)](https://badge.fury.io/js/disqus-react \"View this package on npm\")  \n\nA package for integrating [Disqus](http://disqus.com/) services into React applications.  \n\n## Installation  \n\nUsing [npm](https://www.npmjs.com/):  \n\n```bash\n$ npm install --save disqus-react\n```\n\nUsing [yarn](https://yarnpkg.com/):\n```bash\n$ yarn add disqus-react\n```\n\n## Usage  \n\n### DiscussionEmbed  \n\nThis is the component that will load the main Disqus comments section.\n\n```js\nimport { DiscussionEmbed } from 'disqus-react';\n\n\u003cDiscussionEmbed\n    shortname='example'\n    config={\n        {\n            url: this.props.article.url,\n            identifier: this.props.article.id,\n            title: this.props.article.title,\n            language: 'zh_TW' //e.g. for Traditional Chinese (Taiwan)\t\n        }\n    }\n/\u003e\n```\n\nThis 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.  \n\n### DiscussionEmbed with SSO\n\nThis is an example for setting up the DiscussionEmbed component with SSO.  This example config is also used on the Disqus React SSO example found here: https://disqus-sso-react-demo.glitch.me/.\n\n```js\nimport { DiscussionEmbed } from 'disqus-react';\n\n\u003cDiscussionEmbed\n    shortname='example'\n    config={\n        {\n            url: this.props.article.url,\n            identifier: this.props.article.id,\n            title: this.props.article.title,\n            language: 'zh_TW', //e.g. for Traditional Chinese (Taiwan)\n            apiKey: '',\n            sso: {\n                name: 'SampleNews',\n                button: 'http://example.com/images/samplenews.gif',\n                icon: 'http://example.com/favicon.png',\n                url: 'http://example.com/login/',\n                logout: 'http://example.com/logout/',\n                profile_url: 'http://example.com/profileUrlTemplate/{username}',\n                width: '800',\n                height: '400',\n            }\n        }\n    }\n/\u003e\n```\n\n### CommentCount  \n\nThis component will display the comment count for the Disqus thread associated with the provided config.  \n\n```js\nimport { CommentCount } from 'disqus-react';\n\n\u003cCommentCount\n    shortname='example'\n    config={\n        {\n            url: this.props.article.url,\n            identifier: this.props.article.id,\n            title: this.props.article.title,\n        }\n    }\n\u003e\n    {/* Placeholder Text */}\n    Comments\n\u003c/CommentCount\u003e\n```\n\nMultiple 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).\nHowever, 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.  \n\n\n### CommentEmbed  \n\nThis component can be used to embed a Disqus comment into your page.  \n\n```js\nimport { CommentEmbed } from 'disqus-react';\n\n\u003cCommentEmbed\n    commentId={this.props.article.featuredCommentId}\n    showMedia={true}\n    showParentComment={true}\n    width={420}\n    height={320}\n/\u003e\n```\n\nMultiple 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`.  \n\n\n### Recommendations  \n\nThis component can be used to embed Disqus Recommendations into your page.  \n\n```js\nimport { Recommendations } from 'disqus-react';\n\n\u003cRecommendations \n    shortname='example'\n    config={\n        {\n            url: this.props.article.url,\n            identifier: this.props.article.id,\n            title: this.props.article.title,\n        }\n    }\n/\u003e\n\n```\nThe `config` prop is optional and is used to prevent any discussions on the current page from being included in the recommendations.\nThis component is limited to one instance in the DOM at a time and will handle updates to the `shortname` prop and reload appropriately with recommended pages for the new forum shortname.  \n\n## Contributing  \n\nIf 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).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdisqus%2Fdisqus-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdisqus%2Fdisqus-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdisqus%2Fdisqus-react/lists"}