├── .babelrc ├── .github ├── FUNDING.yml └── workflows │ └── npmpublish.yml ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── README.md ├── bower.json ├── build ├── components │ └── DisqusThread.js └── main.js ├── dist ├── react-disqus-thread.js ├── react-disqus-thread.map ├── react-disqus-thread.min.js └── react-disqus-thread.min.map ├── examples └── basic │ ├── app.js │ └── index.html ├── lib ├── components │ ├── DisqusThread.js │ └── __tests__ │ │ └── DisqusThread-test.js └── main.js ├── package-lock.json ├── package.json └── typescript └── types.d.ts /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"], 3 | "plugins": ["transform-object-rest-spread"] 4 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: 'https://www.buymeacoffee.com/allenkoren' 2 | -------------------------------------------------------------------------------- /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages 3 | 4 | name: Node.js Package 5 | 6 | on: 7 | release: 8 | types: [created] 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: actions/setup-node@v1 16 | with: 17 | node-version: 12 18 | - run: npm build 19 | 20 | publish-npm: 21 | needs: build 22 | runs-on: ubuntu-latest 23 | steps: 24 | - uses: actions/checkout@v2 25 | - uses: actions/setup-node@v1 26 | with: 27 | node-version: 12 28 | registry-url: https://registry.npmjs.org/ 29 | - run: npm build 30 | - run: npm publish 31 | env: 32 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | *.iml 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | **/.* 2 | **/__tests__/ 3 | examples/ 4 | bower.json 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "0.10" 5 | before_script: 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start 8 | email: 9 | on_failure: change 10 | on_success: never 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | v0.4.0 - Tue, 31 May 2016 15:56:41 GMT 2 | -------------------------------------- 3 | 4 | - 5 | 6 | 7 | v0.3.1 - Fri, 23 Oct 2015 18:13:08 GMT 8 | -------------------------------------- 9 | 10 | - [5af856e](../../commit/5af856e) [fixed] Removing ReactDOM from bundle 11 | 12 | 13 | v0.3.0 - Thu, 22 Oct 2015 06:35:57 GMT 14 | -------------------------------------- 15 | 16 | - 17 | 18 | 19 | # Changelog 20 | 21 | ### 0.1.0 (Oct 21, 2014) 22 | 23 | - Initial release 24 | 25 | ### 0.2.0 (Jun 11, 2015) 26 | 27 | - Allow Disqus thread to unload and load a new one 28 | - Moving React to `peerDependencies` 29 | - Updating to React 0.13 30 | - Removing JSX 31 | 32 | ### 0.2.1 (Jun 11, 2015) 33 | 34 | - Fixing issue with deprecated `transferPropsTo` 35 | 36 | ### 0.2.2 (Jun 11, 2015) 37 | 38 | - Adding React to `devDependencies` 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-disqus-comments 2 | 3 | ## Installing 4 | 5 | ```bash 6 | $ npm install react-disqus-comments 7 | ``` 8 | 9 | ## Example 10 | 11 | ```js 12 | import React from 'react'; 13 | import ReactDisqusComments from 'react-disqus-comments'; 14 | 15 | class App extends React.Component { 16 | handleNewComment(comment) { 17 | console.log(comment.text); 18 | } 19 | 20 | render() { 21 | return ( 22 | 29 | ); 30 | } 31 | } 32 | 33 | React.render(, document.getElementById('container')); 34 | ``` 35 | 36 | ## License 37 | 38 | MIT 39 | 40 | ## Thanks 41 | Thanks to mzabriskie for the original package. This package fixes annoying warnings. 42 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-disqus-thread", 3 | "version": "0.4.0", 4 | "homepage": "https://github.com/mzabriskie/react-disqus-thread.git", 5 | "authors": [ 6 | "Matt Zabriskie" 7 | ], 8 | "description": "React Disqus thread component", 9 | "main": "./dist/react-disqus-thread.js", 10 | "keywords": [ 11 | "disqus", 12 | "react", 13 | "react-component" 14 | ], 15 | "license": "MIT", 16 | "ignore": [ 17 | "**/.*", 18 | "example", 19 | "lib", 20 | "node_modules", 21 | "script", 22 | "specs", 23 | "index.js", 24 | "karma.conf.js", 25 | "webpack.config.js", 26 | "package.json" 27 | ] 28 | } -------------------------------------------------------------------------------- /build/components/DisqusThread.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 10 | 11 | var _react = require('react'); 12 | 13 | var _react2 = _interopRequireDefault(_react); 14 | 15 | var _propTypes = require('prop-types'); 16 | 17 | var _propTypes2 = _interopRequireDefault(_propTypes); 18 | 19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 20 | 21 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 22 | 23 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 24 | 25 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 26 | 27 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 28 | 29 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 30 | 31 | var DISQUS_CONFIG = ['shortname', 'identifier', 'title', 'url', 'category_id', 'onNewComment', 'language']; 32 | var __disqusAdded = false; 33 | 34 | function copyProps(context, props) { 35 | var onNewComment = props.onNewComment, 36 | language = props.language, 37 | rest = _objectWithoutProperties(props, ['onNewComment', 'language']); 38 | 39 | for (var prop in rest) { 40 | context.page[prop] = rest[prop]; 41 | } 42 | 43 | // Setting the language - if none is provided, the default one is used 44 | context.language = language; 45 | 46 | if (onNewComment) { 47 | context.callbacks = { 48 | onNewComment: [onNewComment] 49 | }; 50 | } 51 | } 52 | 53 | var DisqusThread = function (_React$Component) { 54 | _inherits(DisqusThread, _React$Component); 55 | 56 | function DisqusThread() { 57 | _classCallCheck(this, DisqusThread); 58 | 59 | return _possibleConstructorReturn(this, (DisqusThread.__proto__ || Object.getPrototypeOf(DisqusThread)).apply(this, arguments)); 60 | } 61 | 62 | _createClass(DisqusThread, [{ 63 | key: 'componentDidMount', 64 | value: function componentDidMount() { 65 | this.loadDisqus(); 66 | } 67 | }, { 68 | key: 'componentDidUpdate', 69 | value: function componentDidUpdate() { 70 | this.loadDisqus(); 71 | } 72 | }, { 73 | key: 'shouldComponentUpdate', 74 | value: function shouldComponentUpdate(nextProps, nextState) { 75 | return nextProps.identifier !== this.props.identifier; 76 | } 77 | }, { 78 | key: 'render', 79 | value: function render() { 80 | var _this2 = this; 81 | 82 | var props = Object.keys(this.props).reduce(function (memo, key) { 83 | return DISQUS_CONFIG.some(function (config) { 84 | return config === key; 85 | }) ? memo : _extends({}, memo, _defineProperty({}, key, _this2.props[key])); 86 | }, {}); 87 | 88 | return _react2.default.createElement( 89 | 'div', 90 | props, 91 | _react2.default.createElement('div', { id: 'disqus_thread' }) 92 | ); 93 | } 94 | }, { 95 | key: 'addDisqusScript', 96 | value: function addDisqusScript() { 97 | if (__disqusAdded) { 98 | return; 99 | } 100 | 101 | var child = this.disqus = document.createElement('script'); 102 | var parent = document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]; 103 | 104 | child.async = true; 105 | child.type = 'text/javascript'; 106 | child.src = '//' + this.props.shortname + '.disqus.com/embed.js'; 107 | 108 | parent.appendChild(child); 109 | __disqusAdded = true; 110 | } 111 | }, { 112 | key: 'loadDisqus', 113 | value: function loadDisqus() { 114 | var _this3 = this; 115 | 116 | var props = {}; 117 | 118 | // Extract Disqus props that were supplied to this component 119 | DISQUS_CONFIG.forEach(function (prop) { 120 | // prop "shortname" is only necessary for loading the script, not for the config itself 121 | if (prop !== 'shortname' && !!_this3.props[prop]) { 122 | props[prop] = _this3.props[prop]; 123 | } 124 | }); 125 | 126 | // If Disqus has already been added, reset it 127 | if (typeof DISQUS !== 'undefined') { 128 | DISQUS.reset({ 129 | reload: true, 130 | config: function config() { 131 | copyProps(this, props); 132 | 133 | // Disqus needs hashbang URL, see https://help.disqus.com/customer/portal/articles/472107 134 | this.page.url = this.page.url.replace(/#/, '') + '#!newthread'; 135 | } 136 | }); 137 | } else { 138 | // Otherwise add Disqus to the page 139 | window.disqus_config = function () { 140 | copyProps(this, props); 141 | }; 142 | this.addDisqusScript(); 143 | } 144 | } 145 | }]); 146 | 147 | return DisqusThread; 148 | }(_react2.default.Component); 149 | 150 | DisqusThread.displayName = 'DisqusThread'; 151 | 152 | DisqusThread.propTypes = { 153 | id: _propTypes2.default.string, 154 | 155 | /** 156 | * `shortname` tells the Disqus service your forum's shortname, 157 | * which is the unique identifier for your website as registered 158 | * on Disqus. If undefined , the Disqus embed will not load. 159 | */ 160 | shortname: _propTypes2.default.string.isRequired, 161 | 162 | /** 163 | * `identifier` tells the Disqus service how to identify the 164 | * current page. When the Disqus embed is loaded, the identifier 165 | * is used to look up the correct thread. If disqus_identifier 166 | * is undefined, the page's URL will be used. The URL can be 167 | * unreliable, such as when renaming an article slug or changing 168 | * domains, so we recommend using your own unique way of 169 | * identifying a thread. 170 | */ 171 | identifier: _propTypes2.default.string, 172 | 173 | /** 174 | * `title` tells the Disqus service the title of the current page. 175 | * This is used when creating the thread on Disqus for the first time. 176 | * If undefined, Disqus will use the attribute of the page. 177 | * If that attribute could not be used, Disqus will use the URL of the page. 178 | */ 179 | title: _propTypes2.default.string, 180 | 181 | /** 182 | * `url` tells the Disqus service the URL of the current page. 183 | * If undefined, Disqus will take the window.location.href. 184 | * This URL is used to look up or create a thread if disqus_identifier 185 | * is undefined. In addition, this URL is always saved when a thread is 186 | * being created so that Disqus knows what page a thread belongs to. 187 | */ 188 | url: _propTypes2.default.string, 189 | 190 | /** 191 | * `category_id` tells the Disqus service the category to be used for 192 | * the current page. This is used when creating the thread on Disqus 193 | * for the first time. 194 | */ 195 | category_id: _propTypes2.default.string, 196 | 197 | /** 198 | * `onNewComment` function accepts one parameter `comment` which is a 199 | * JavaScript object with comment `id` and `text`. This allows you to track 200 | * user comments and replies and run a script after a comment is posted. 201 | */ 202 | onNewComment: _propTypes2.default.func, 203 | 204 | /** 205 | * `language` tells the Disqus service which language should be used. 206 | * Please refer to https://www.transifex.com/disqus/disqus/ on which languages can be used 207 | * If undefined, English is used as default one 208 | */ 209 | language: _propTypes2.default.string 210 | }; 211 | 212 | DisqusThread.defaultProps = { 213 | url: typeof window === 'undefined' ? null : window.location.href 214 | }; 215 | 216 | exports.default = DisqusThread; -------------------------------------------------------------------------------- /build/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = require('./components/DisqusThread'); -------------------------------------------------------------------------------- /dist/react-disqus-thread.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("React")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["React"], factory); 6 | else if(typeof exports === 'object') 7 | exports["ReactDisqusThread"] = factory(require("React")); 8 | else 9 | root["ReactDisqusThread"] = factory(root["React"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_2__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | /******/ 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | module.exports = __webpack_require__(1); 60 | 61 | /***/ }, 62 | /* 1 */ 63 | /***/ function(module, exports, __webpack_require__) { 64 | 65 | 'use strict'; 66 | 67 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 68 | 69 | var _react = __webpack_require__(2); 70 | 71 | var _react2 = _interopRequireDefault(_react); 72 | 73 | var DISQUS_CONFIG = ['shortname', 'identifier', 'title', 'url', 'category_id', 'onNewComment']; 74 | var __disqusAdded = false; 75 | 76 | function copyProps(context, props) { 77 | var prefix = arguments.length <= 2 || arguments[2] === undefined ? '' : arguments[2]; 78 | 79 | Object.keys(props).forEach(function (prop) { 80 | context[prefix + prop] = props[prop]; 81 | }); 82 | 83 | if (typeof props.onNewComment === 'function') { 84 | context[prefix + 'config'] = function config() { 85 | this.callbacks.onNewComment = [function handleNewComment(comment) { 86 | props.onNewComment(comment); 87 | }]; 88 | }; 89 | } 90 | } 91 | 92 | module.exports = _react2['default'].createClass({ 93 | displayName: 'DisqusThread', 94 | 95 | propTypes: { 96 | id: _react2['default'].PropTypes.string, 97 | 98 | /** 99 | * `shortname` tells the Disqus service your forum's shortname, 100 | * which is the unique identifier for your website as registered 101 | * on Disqus. If undefined , the Disqus embed will not load. 102 | */ 103 | shortname: _react2['default'].PropTypes.string.isRequired, 104 | 105 | /** 106 | * `identifier` tells the Disqus service how to identify the 107 | * current page. When the Disqus embed is loaded, the identifier 108 | * is used to look up the correct thread. If disqus_identifier 109 | * is undefined, the page's URL will be used. The URL can be 110 | * unreliable, such as when renaming an article slug or changing 111 | * domains, so we recommend using your own unique way of 112 | * identifying a thread. 113 | */ 114 | identifier: _react2['default'].PropTypes.string, 115 | 116 | /** 117 | * `title` tells the Disqus service the title of the current page. 118 | * This is used when creating the thread on Disqus for the first time. 119 | * If undefined, Disqus will use the <title> attribute of the page. 120 | * If that attribute could not be used, Disqus will use the URL of the page. 121 | */ 122 | title: _react2['default'].PropTypes.string, 123 | 124 | /** 125 | * `url` tells the Disqus service the URL of the current page. 126 | * If undefined, Disqus will take the window.location.href. 127 | * This URL is used to look up or create a thread if disqus_identifier 128 | * is undefined. In addition, this URL is always saved when a thread is 129 | * being created so that Disqus knows what page a thread belongs to. 130 | */ 131 | url: _react2['default'].PropTypes.string, 132 | 133 | /** 134 | * `category_id` tells the Disqus service the category to be used for 135 | * the current page. This is used when creating the thread on Disqus 136 | * for the first time. 137 | */ 138 | category_id: _react2['default'].PropTypes.string, 139 | 140 | /** 141 | * `onNewComment` function accepts one parameter `comment` which is a 142 | * JavaScript object with comment `id` and `text`. This allows you to track 143 | * user comments and replies and run a script after a comment is posted. 144 | */ 145 | onNewComment: _react2['default'].PropTypes.func 146 | }, 147 | 148 | getDefaultProps: function getDefaultProps() { 149 | return { 150 | shortname: null, 151 | identifier: null, 152 | title: null, 153 | url: null, 154 | category_id: null, 155 | onNewComment: null 156 | }; 157 | }, 158 | 159 | componentDidMount: function componentDidMount() { 160 | this.loadDisqus(); 161 | }, 162 | 163 | componentDidUpdate: function componentDidUpdate() { 164 | this.loadDisqus(); 165 | }, 166 | 167 | render: function render() { 168 | return _react2['default'].createElement( 169 | 'div', 170 | this.props, 171 | _react2['default'].createElement('div', { id: 'disqus_thread' }), 172 | _react2['default'].createElement( 173 | 'noscript', 174 | null, 175 | _react2['default'].createElement( 176 | 'span', 177 | null, 178 | 'Please enable JavaScript to view the', 179 | _react2['default'].createElement( 180 | 'a', 181 | { href: 'http://disqus.com/?ref_noscript' }, 182 | 'comments powered by Disqus.' 183 | ) 184 | ) 185 | ), 186 | _react2['default'].createElement( 187 | 'a', 188 | { href: 'http://disqus.com', className: 'dsq-brlink' }, 189 | 'Blog comments powered by ', 190 | _react2['default'].createElement( 191 | 'span', 192 | { className: 'logo-disqus' }, 193 | 'Disqus' 194 | ), 195 | '.' 196 | ) 197 | ); 198 | }, 199 | 200 | addDisqusScript: function addDisqusScript() { 201 | if (__disqusAdded) { 202 | return; 203 | } 204 | 205 | var child = this.disqus = document.createElement('script'); 206 | var parent = document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]; 207 | 208 | child.async = true; 209 | child.type = 'text/javascript'; 210 | child.src = '//' + this.props.shortname + '.disqus.com/embed.js'; 211 | 212 | parent.appendChild(child); 213 | __disqusAdded = true; 214 | }, 215 | 216 | loadDisqus: function loadDisqus() { 217 | var _this = this; 218 | 219 | var props = {}; 220 | 221 | // Extract Disqus props that were supplied to this component 222 | DISQUS_CONFIG.forEach(function (prop) { 223 | if (!!_this.props[prop]) { 224 | props[prop] = _this.props[prop]; 225 | } 226 | }); 227 | 228 | // Always set URL 229 | if (!props.url || !props.url.length) { 230 | props.url = window.location.href; 231 | } 232 | 233 | // If Disqus has already been added, reset it 234 | if (typeof DISQUS !== 'undefined') { 235 | DISQUS.reset({ 236 | reload: true, 237 | config: function config() { 238 | copyProps(this.page, props); 239 | 240 | // Disqus needs hashbang URL, see https://help.disqus.com/customer/portal/articles/472107 241 | this.page.url = this.page.url.replace(/#/, '') + '#!newthread'; 242 | } 243 | }); 244 | } else { 245 | // Otherwise add Disqus to the page 246 | copyProps(window, props, 'disqus_'); 247 | this.addDisqusScript(); 248 | } 249 | } 250 | }); 251 | 252 | /***/ }, 253 | /* 2 */ 254 | /***/ function(module, exports) { 255 | 256 | module.exports = __WEBPACK_EXTERNAL_MODULE_2__; 257 | 258 | /***/ } 259 | /******/ ]) 260 | }); 261 | ; 262 | //# sourceMappingURL=react-disqus-thread.js.map -------------------------------------------------------------------------------- /dist/react-disqus-thread.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 6dd401c0d5706a509d89","webpack:///./index.js","webpack:///./lib/disqus-thread.js","webpack:///external \"React\""],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA,yC;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,IAAG;;AAEH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAK;;AAEL;AACA;AACA;AACA;;AAEA;AACA;AACA,qB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,QAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA,IAAG;;AAEH;AACA;AACA,IAAG;;AAEH;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA,kBAAiB,mBAAmB;AACpC;AACA;AACA;AACA,oBAAmB,uCAAuC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAW;AACX;AACA,qBAAoB,wBAAwB;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;;;;;;;ACnLD,gD","file":"./dist/react-disqus-thread.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"React\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"React\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactDisqusThread\"] = factory(require(\"React\"));\n\telse\n\t\troot[\"ReactDisqusThread\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 6dd401c0d5706a509d89\n **/","module.exports = require('./lib/disqus-thread');\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./index.js\n ** module id = 0\n ** module chunks = 0\n **/","var React = require('react');\nvar DOM = React.DOM;\nvar DISQUS_CONFIG = [\n 'shortname', 'identifier', 'title', 'url', 'category_id', 'onNewComment'\n];\nvar __disqusAdded = false;\n\nfunction copyProps(context, props, prefix) {\n if (typeof prefix === 'undefined') {\n prefix = '';\n }\n\n Object.keys(props).forEach(function(prop) {\n context[prefix + prop] = props[prop];\n });\n\n if (typeof props.onNewComment === 'function') {\n context[prefix + 'config'] = function () {\n this.callbacks.onNewComment = [\n function (comment) {\n props.onNewComment(comment);\n }\n ];\n };\n }\n}\n\nmodule.exports = React.createClass({\n displayName: 'DisqusThread',\n\n propTypes: {\n /**\n * `shortname` tells the Disqus service your forum's shortname,\n * which is the unique identifier for your website as registered\n * on Disqus. If undefined , the Disqus embed will not load.\n */\n shortname: React.PropTypes.string.isRequired,\n\n /**\n * `identifier` tells the Disqus service how to identify the\n * current page. When the Disqus embed is loaded, the identifier\n * is used to look up the correct thread. If disqus_identifier\n * is undefined, the page's URL will be used. The URL can be\n * unreliable, such as when renaming an article slug or changing\n * domains, so we recommend using your own unique way of\n * identifying a thread.\n */\n identifier: React.PropTypes.string,\n\n /**\n * `title` tells the Disqus service the title of the current page.\n * This is used when creating the thread on Disqus for the first time.\n * If undefined, Disqus will use the <title> attribute of the page.\n * If that attribute could not be used, Disqus will use the URL of the page.\n */\n title: React.PropTypes.string,\n\n /**\n * `url` tells the Disqus service the URL of the current page.\n * If undefined, Disqus will take the window.location.href.\n * This URL is used to look up or create a thread if disqus_identifier\n * is undefined. In addition, this URL is always saved when a thread is\n * being created so that Disqus knows what page a thread belongs to.\n */\n url: React.PropTypes.string,\n\n /**\n * `category_id` tells the Disqus service the category to be used for\n * the current page. This is used when creating the thread on Disqus\n * for the first time.\n */\n category_id: React.PropTypes.string,\n\n /**\n * `onNewComment` function accepts one parameter `comment` which is a \n * JavaScript object with comment `id` and `text`. This allows you to track\n * user comments and replies and run a script after a comment is posted.\n */\n onNewComment: React.PropTypes.func\n },\n\n getDefaultProps: function () {\n return {\n shortname: null,\n identifier: null,\n title: null,\n url: null,\n category_id: null,\n onNewComment: null\n };\n },\n\n addDisqusScript: function () {\n if (__disqusAdded) {\n return;\n }\n\n var child = this.disqus = document.createElement('script');\n var parent = document.getElementsByTagName('head')[0] ||\n document.getElementsByTagName('body')[0];\n\n child.async = true;\n child.type = 'text/javascript';\n child.src = '//' + this.props.shortname + '.disqus.com/embed.js';\n\n parent.appendChild(child);\n __disqusAdded = true;\n },\n\n loadDisqus: function() {\n var props = {};\n\n // Extract Disqus props that were supplied to this component\n DISQUS_CONFIG.forEach(function(prop) {\n if (!!this.props[prop]) {\n props[prop] = this.props[prop];\n }\n }, this);\n\n // Always set URL\n if (!props.url || !props.url.length) {\n props.url = window.location.href;\n }\n\n // If Disqus has already been added, reset it\n if (typeof DISQUS !== 'undefined') {\n DISQUS.reset({ \n reload: true,\n config: function() {\n copyProps(this.page, props);\n\n // Disqus needs hashbang URL, see https://help.disqus.com/customer/portal/articles/472107\n this.page.url = this.page.url.replace(/#/, '') + '#!newthread';\n }\n });\n }\n // Otherwise add Disqus to the page\n else {\n copyProps(window, props, 'disqus_');\n this.addDisqusScript();\n }\n },\n\n componentDidMount: function () {\n this.loadDisqus();\n },\n\n componentDidUpdate: function () {\n this.loadDisqus();\n },\n\n shouldComponentUpdate: function(newProps) {\n return (newProps.id !== this.props.id || newProps.url !== this.props.url);\n },\n\n render: function () {\n return (\n DOM.div(this.props,\n DOM.div({id:\"disqus_thread\"}),\n DOM.noscript(null,\n DOM.span(null,\n 'Please enable JavaScript to view the ',\n DOM.a({href:\"http://disqus.com/?ref_noscript\"},\n 'comments powered by Disqus.'\n )\n )\n ),\n DOM.a({\n href:\"http://disqus.com\",\n className:\"dsq-brlink\"\n },\n 'blog comments powered by ',\n DOM.span({className:\"logo-disqus\"},\n 'Disqus'\n )\n )\n )\n );\n }\n});\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./lib/disqus-thread.js\n ** module id = 1\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"React\"\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/react-disqus-thread.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ReactDisqusThread=t(require("React")):e.ReactDisqusThread=t(e.React)}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";e.exports=n(1)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){var n=arguments.length<=2||void 0===arguments[2]?"":arguments[2];Object.keys(t).forEach(function(o){e[n+o]=t[o]}),"function"==typeof t.onNewComment&&(e[n+"config"]=function(){this.callbacks.onNewComment=[function(e){t.onNewComment(e)}]})}var s=n(2),i=o(s),a=["shortname","identifier","title","url","category_id","onNewComment"],u=!1;e.exports=i["default"].createClass({displayName:"DisqusThread",propTypes:{id:i["default"].PropTypes.string,shortname:i["default"].PropTypes.string.isRequired,identifier:i["default"].PropTypes.string,title:i["default"].PropTypes.string,url:i["default"].PropTypes.string,category_id:i["default"].PropTypes.string,onNewComment:i["default"].PropTypes.func},getDefaultProps:function(){return{shortname:null,identifier:null,title:null,url:null,category_id:null,onNewComment:null}},componentDidMount:function(){this.loadDisqus()},componentDidUpdate:function(){this.loadDisqus()},render:function(){return i["default"].createElement("div",this.props,i["default"].createElement("div",{id:"disqus_thread"}),i["default"].createElement("noscript",null,i["default"].createElement("span",null,"Please enable JavaScript to view the",i["default"].createElement("a",{href:"http://disqus.com/?ref_noscript"},"comments powered by Disqus."))),i["default"].createElement("a",{href:"http://disqus.com",className:"dsq-brlink"},"Blog comments powered by ",i["default"].createElement("span",{className:"logo-disqus"},"Disqus"),"."))},addDisqusScript:function(){if(!u){var e=this.disqus=document.createElement("script"),t=document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0];e.async=!0,e.type="text/javascript",e.src="//"+this.props.shortname+".disqus.com/embed.js",t.appendChild(e),u=!0}},loadDisqus:function(){var e=this,t={};a.forEach(function(n){e.props[n]&&(t[n]=e.props[n])}),t.url&&t.url.length||(t.url=window.location.href),"undefined"!=typeof DISQUS?DISQUS.reset({reload:!0,config:function(){r(this.page,t),this.page.url=this.page.url.replace(/#/,"")+"#!newthread"}}):(r(window,t,"disqus_"),this.addDisqusScript())}})},function(t,n){t.exports=e}])}); 2 | //# sourceMappingURL=react-disqus-thread.min.js.map -------------------------------------------------------------------------------- /dist/react-disqus-thread.min.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["dist/react-disqus-thread.js"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE_2__","modules","__webpack_require__","moduleId","installedModules","id","loaded","call","m","c","p","copyProps","context","props","prefix","Object","keys","forEach","prop","onNewComment","callbacks","comment","React","DOM","DISQUS_CONFIG","__disqusAdded","createClass","displayName","propTypes","shortname","PropTypes","string","isRequired","identifier","title","url","category_id","func","getDefaultProps","addDisqusScript","child","disqus","document","createElement","parent","getElementsByTagName","async","type","src","appendChild","loadDisqus","length","window","location","href","DISQUS","reset","reload","config","page","replace","componentDidMount","componentDidUpdate","shouldComponentUpdate","newProps","render","div","noscript","span","a","className"],"mappings":"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","file":"dist/react-disqus-thread.min.js"} -------------------------------------------------------------------------------- /examples/basic/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import DisqusThread from '../../lib/main'; 4 | 5 | const App = React.createClass({ 6 | handleNewComment(comment) { 7 | /* eslint no-console:0 */ 8 | console.log(comment); 9 | }, 10 | 11 | render() { 12 | return ( 13 | <div> 14 | <h1>React Disqus thread component</h1> 15 | <DisqusThread 16 | shortname="mzabriskie" 17 | identifier="react-disqus-thread" 18 | title="React Disqus thread component" 19 | onNewComment={this.handleNewComment} 20 | /> 21 | </div> 22 | ); 23 | } 24 | }); 25 | 26 | ReactDOM.render(<App/>, document.getElementById('example')); 27 | 28 | -------------------------------------------------------------------------------- /examples/basic/index.html: -------------------------------------------------------------------------------- 1 | <!doctype html> 2 | <meta charset="utf-8"/> 3 | <title>React Disqus thread component 4 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /lib/components/DisqusThread.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | const DISQUS_CONFIG = [ 4 | 'shortname', 'identifier', 'title', 'url', 'category_id', 'onNewComment', 'language' 5 | ]; 6 | let __disqusAdded = false; 7 | 8 | function copyProps(context, props) { 9 | const { 10 | onNewComment, 11 | language, 12 | ...rest // Those props have to be set on context.page 13 | } = props; 14 | 15 | 16 | for (const prop in rest) { 17 | context.page[prop] = rest[prop]; 18 | } 19 | 20 | // Setting the language - if none is provided, the default one is used 21 | context.language = language; 22 | 23 | if (onNewComment) { 24 | context.callbacks = { 25 | onNewComment: [onNewComment] 26 | } 27 | } 28 | } 29 | 30 | class DisqusThread extends React.Component { 31 | componentDidMount() { 32 | this.loadDisqus(); 33 | } 34 | 35 | componentDidUpdate() { 36 | this.loadDisqus(); 37 | } 38 | 39 | shouldComponentUpdate(nextProps, nextState) { 40 | return nextProps.identifier !== this.props.identifier; 41 | } 42 | 43 | render() { 44 | const props = Object.keys(this.props).reduce((memo, key) => ( 45 | DISQUS_CONFIG.some(config => config === key) ? memo : { ...memo, [key]: this.props[key] } 46 | ), {}); 47 | 48 | return ( 49 |
50 |
51 |
52 | ); 53 | } 54 | 55 | addDisqusScript() { 56 | if (__disqusAdded) { 57 | return; 58 | } 59 | 60 | const child = this.disqus = document.createElement('script'); 61 | const parent = document.getElementsByTagName('head')[0] || 62 | document.getElementsByTagName('body')[0]; 63 | 64 | child.async = true; 65 | child.type = 'text/javascript'; 66 | child.src = '//' + this.props.shortname + '.disqus.com/embed.js'; 67 | 68 | parent.appendChild(child); 69 | __disqusAdded = true; 70 | } 71 | 72 | loadDisqus() { 73 | const props = {}; 74 | 75 | // Extract Disqus props that were supplied to this component 76 | DISQUS_CONFIG.forEach(prop => { 77 | // prop "shortname" is only necessary for loading the script, not for the config itself 78 | if (prop !== 'shortname' && !!this.props[prop]) { 79 | props[prop] = this.props[prop]; 80 | } 81 | }); 82 | 83 | // If Disqus has already been added, reset it 84 | if (typeof DISQUS !== 'undefined') { 85 | DISQUS.reset({ 86 | reload: true, 87 | config: function() { 88 | copyProps(this, props); 89 | 90 | // Disqus needs hashbang URL, see https://help.disqus.com/customer/portal/articles/472107 91 | this.page.url = this.page.url.replace(/#/, '') + '#!newthread'; 92 | } 93 | }); 94 | } else { // Otherwise add Disqus to the page 95 | window.disqus_config = function() { 96 | copyProps(this, props); 97 | }; 98 | this.addDisqusScript(); 99 | } 100 | } 101 | } 102 | 103 | DisqusThread.displayName = 'DisqusThread'; 104 | 105 | DisqusThread.propTypes = { 106 | id: PropTypes.string, 107 | 108 | /** 109 | * `shortname` tells the Disqus service your forum's shortname, 110 | * which is the unique identifier for your website as registered 111 | * on Disqus. If undefined , the Disqus embed will not load. 112 | */ 113 | shortname: PropTypes.string.isRequired, 114 | 115 | /** 116 | * `identifier` tells the Disqus service how to identify the 117 | * current page. When the Disqus embed is loaded, the identifier 118 | * is used to look up the correct thread. If disqus_identifier 119 | * is undefined, the page's URL will be used. The URL can be 120 | * unreliable, such as when renaming an article slug or changing 121 | * domains, so we recommend using your own unique way of 122 | * identifying a thread. 123 | */ 124 | identifier: PropTypes.string, 125 | 126 | /** 127 | * `title` tells the Disqus service the title of the current page. 128 | * This is used when creating the thread on Disqus for the first time. 129 | * If undefined, Disqus will use the attribute of the page. 130 | * If that attribute could not be used, Disqus will use the URL of the page. 131 | */ 132 | title: PropTypes.string, 133 | 134 | /** 135 | * `url` tells the Disqus service the URL of the current page. 136 | * If undefined, Disqus will take the window.location.href. 137 | * This URL is used to look up or create a thread if disqus_identifier 138 | * is undefined. In addition, this URL is always saved when a thread is 139 | * being created so that Disqus knows what page a thread belongs to. 140 | */ 141 | url: PropTypes.string, 142 | 143 | /** 144 | * `category_id` tells the Disqus service the category to be used for 145 | * the current page. This is used when creating the thread on Disqus 146 | * for the first time. 147 | */ 148 | category_id: PropTypes.string, 149 | 150 | /** 151 | * `onNewComment` function accepts one parameter `comment` which is a 152 | * JavaScript object with comment `id` and `text`. This allows you to track 153 | * user comments and replies and run a script after a comment is posted. 154 | */ 155 | onNewComment: PropTypes.func, 156 | 157 | /** 158 | * `language` tells the Disqus service which language should be used. 159 | * Please refer to https://www.transifex.com/disqus/disqus/ on which languages can be used 160 | * If undefined, English is used as default one 161 | */ 162 | language: PropTypes.string 163 | }; 164 | 165 | DisqusThread.defaultProps = { 166 | url: typeof window === 'undefined' ? null : window.location.href 167 | }; 168 | 169 | export default DisqusThread; -------------------------------------------------------------------------------- /lib/components/__tests__/DisqusThread-test.js: -------------------------------------------------------------------------------- 1 | import { equal } from 'assert'; 2 | 3 | /* eslint func-names:0 */ 4 | describe('react-disqus-thread', function() { 5 | it('should have tests', function() { 6 | equal(true, true); 7 | }); 8 | }); 9 | 10 | -------------------------------------------------------------------------------- /lib/main.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./components/DisqusThread'); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-disqus-comments", 3 | "version": "1.4.0", 4 | "description": "React Disqus thread component", 5 | "main": "build/main.js", 6 | "scripts": { 7 | "test": "rackt test --single-run --browsers Firefox", 8 | "start": "rackt server", 9 | "build": "rm -rf build && babel -d build --ignore DisqusThread-test.js lib", 10 | "publish": "npm publish" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/theplatapi/react-disqus-thread" 15 | }, 16 | "keywords": [ 17 | "disqus", 18 | "react", 19 | "react-component" 20 | ], 21 | "license": "MIT", 22 | "homepage": "https://github.com/theplatapi/react-disqus-thread", 23 | "peerDependencies": { 24 | "react": ">=15.0.1 < 17.0.0", 25 | "react-dom": ">=15.0.1 < 17.0.0" 26 | }, 27 | "devDependencies": { 28 | "babel-cli": "^6.11.4", 29 | "babel-plugin-transform-object-rest-spread": "^6.8.0", 30 | "babel-preset-es2015": "^6.13.2", 31 | "babel-preset-react": "^6.11.1", 32 | "prop-types": "^15.5.0", 33 | "rackt-cli": "^0.5.3", 34 | "react": "^15.0.1", 35 | "react-dom": "^15.0.1" 36 | }, 37 | "types": "typescript/types.d.ts" 38 | } 39 | -------------------------------------------------------------------------------- /typescript/types.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | type OnCommentCallback = (comment: { id: string, text: string }) => any; 4 | 5 | /** 6 | * Interface for `DisqusThread` props. 7 | * 8 | * @interface DisqusThreadProps 9 | * @since 1.0.3 10 | */ 11 | export declare interface DisqusThreadProps { 12 | id?: string; 13 | 14 | /** 15 | * `shortname` tells the Disqus service your forum's shortname, 16 | * which is the unique identifier for your website as registered 17 | * on Disqus. If undefined , the Disqus embed will not load. 18 | * 19 | * @property {string} shortname 20 | */ 21 | shortname: string; 22 | 23 | /** 24 | * `identifier` tells the Disqus service how to identify the 25 | * current page. When the Disqus embed is loaded, the identifier 26 | * is used to look up the correct thread. If disqus_identifier 27 | * is undefined, the page's URL will be used. The URL can be 28 | * unreliable, such as when renaming an article slug or changing 29 | * domains, so we recommend using your own unique way of 30 | * identifying a thread. 31 | * 32 | * @property {string} identifier 33 | */ 34 | identifier?: string; 35 | 36 | /** 37 | * `title` tells the Disqus service the title of the current page. 38 | * This is used when creating the thread on Disqus for the first time. 39 | * If undefined, Disqus will use the <title> attribute of the page. 40 | * If that attribute could not be used, Disqus will use the URL of the page. 41 | * 42 | * @property {string} title 43 | */ 44 | title?: string; 45 | 46 | /** 47 | * `url` tells the Disqus service the URL of the current page. 48 | * If undefined, Disqus will take the window.location.href. 49 | * This URL is used to look up or create a thread if disqus_identifier 50 | * is undefined. In addition, this URL is always saved when a thread is 51 | * being created so that Disqus knows what page a thread belongs to. 52 | * 53 | * @property {string} url 54 | */ 55 | url?: string; 56 | 57 | /** 58 | * `category_id` tells the Disqus service the category to be used for 59 | * the current page. This is used when creating the thread on Disqus 60 | * for the first time. 61 | * 62 | * @property {string} category_id 63 | */ 64 | category_id?: string; 65 | 66 | /** 67 | * `onNewComment` function accepts one parameter `comment` which is a 68 | * JavaScript object with comment `id` and `text`. This allows you to track 69 | * user comments and replies and run a script after a comment is posted. 70 | * 71 | * `({id, text}) => any` 72 | * 73 | * @property {function} onNewComment 74 | */ 75 | onNewComment?: OnCommentCallback; 76 | 77 | /** 78 | * `language` tells the Disqus service which language should be used. 79 | * Please refer to https://www.transifex.com/disqus/disqus/ on which languages can be used 80 | * If undefined, English is used as default one 81 | * 82 | * @property {string} language 83 | */ 84 | language?: string; 85 | } 86 | 87 | export declare class DisqusThread extends React.Component<DisqusThreadProps, {}> { 88 | } 89 | export default DisqusThread; --------------------------------------------------------------------------------