mzabriskie / react-disqus-thread

React Discus thread component

react-disqus-thread

React Disqus thread component

Installing

$ npm install react-disqus-thread
# or
$ bower install react-disqus-thread

Demo

http://mzabriskie.github.io/react-disqus-thread/example

Example

var React = require('react');
var ReactDisqusThread = require('react-disqus-thread');

var App = createClass({
	
	handleNewComment: function(comment) {
		console.log(comment.text);
	}

	render: function () {
		return (
			<ReactDisqusThread
				shortname="example"
				identifier="something-unique-12345"
				title="Example Thread"
				url="http://www.example.com/example-thread"
				category_id="123456"
				onNewComment={this.handleNewComment}/>
		);
	}
});

React.render(<App/>, document.getElementById('container'));

License

MIT

react-disqus-thread's Issues

links are not removed

every time it render a disqus, there will be a new in the head.

Style with styled-components

Hello, it could be great to style the disqus iframe with styled-component.

I can't do that simply with createGlobalStyle from styled-components because Disqus render itself in an iframe.

There are some discussions about this here.

My usecase : Each one of my post has a category. Each category is one different color.
So I want to customize the disqus thread specifically depending of my posts.

Thank you

Support React 0.14.0

Currently blocking install in package.json. Since RC1 was just released, would be good to have a roadmap.

Happy to do a PR.

Docs

Hi

Can you add to readme docs, this comments about props?
https://github.com/mzabriskie/react-disqus-thread/blob/master/lib/components/DisqusThread.js#L29

Properties don't update

When you update the Properties of the component the new properties are not loaded. The result is that you only have one diqus thread until you unmount and remount the component.

is this behaviour intended? if so i will create my own fork of this component.
otherwise please implement a behaviour for ReactLifecycle componentDidUpdate()

Multiple Disqus threads in one page?

I have a list of items displayed in a page, and I'd like a separate unique Disqus thread for each item. Right now when I try to open multiple comment sections (there's one for each item), which load the Disqus code, only the last opened section displays the thread; it's removed from the other comment sections. Is there any way to make this work?

Language support

Hi there!
How to set language of DISQUS?

React shouldn't be a dependency

Make it a peer.

Cannot see share bitton

Bump version on NPM?

Would it be possible to update the version of this module on npm to include the react 0.12 support that was merged in a few months ago? Thanks!

react 15 released, please upgrade too

Can I use this component with react-native?

Help me please.

Demo pages are now erroring out

http://mzabriskie.github.io/react-disqus-thread/example

Share button does not appear when I embed the plugin

Hi everyone,

when I embed the plugin everything looks good but I can not see the share button on phones.

Here is my page after embedding:

Should I manipulate the css to adapt it or is there any way plug in can do it without any customization?

Edit content of comment after receiving handleNewComment event?

This isn't exactly an issue, more of a query. I need to modify the content of a comment after it's been posted, to add icons and hoverable links to the text. For example, someone posts {abc} with the {} delimiters, I want to transform that into <img src="img/abc.png/>. Same goes for something like [] which would become <a> tags with specific classes to allow for a hover.

I've tested this in chrome dev tools, and I can manually add those tags into the <p> tag that holds the comment. However I haven't found a way to do this as a reaction to a comment being posted, since the comment is in an iframe which I can't get with document.getElementById. So, is there a way to get at that comment using your library, or using the comment.id which is given in the handleNewComment callback function? Or not possible?

React.createClass is deprecated

Warning: DisqusThread: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Props don't update

If I have a component like this:

constructor(props) {
  super(props);

  this.state = {
    commentsVisible: false
  };
}

handleCommentsClick() {
  this.setState({
    commentsVisible: !this.state.commentsVisible
  });
}

render() {
  var className = this.state.commentsVisible ? '' : 'hidden';
  var message = this.state.commentsVisible ? 'Hide Comments' : 'View Comments';

  return (
    <div>
      <a href="#" onClick={this.handleCommentsClick}>
        {message}
      </a>
      <DisqusThread
        className={className}
        shortname="myshortname"
        identifier="example"
        title="Foo"
      />
    </div>
  ); 
}

The comments will never be displayed. This is because shouldComponentUpdate only checks if the id or url prop has changed. I think it would be better to just remove this function entirely.

Allow scrolling over iframe

I integrated the Disqus iframe into my page however, when my mouse is over it, I cannot scroll the main page (same for the demo page).

Unknown props warning with React 15.2.0

Warning: Unknown props `shortname`, `identifier`, `category_id`, `url`, `onNewComment` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by DisqusThread)

Can't require in node

When I try to require react-disqus-thread it gives me an error because of the jsx syntax. For now I'm using the build version.

Would it be reasonable to give lib/disqus-thread.js a jsx extension so loaders can properly compile and include it?

Project Status

Is this project still maintained? Are any forks of this project still maintained?

It has been over a year since the last PR was accepted, and all the open PR are more than 1 year old.

Tomorrow marks 1 year since the last issue was closed.

In my project, I am using the fork react-disqus-comments from https://github.com/theplatapi/react-disqus-thread, but I failed to document why. Now that I'm running into #32 I am wondering if there is a maintained fork of this project, or if I should start a fork of my own and fix it there.

Crashes with TypeError: Cannot read property 'string' of undefined

Crashes with TypeError: Cannot read property 'string' of undefined upon import.

I'm using the meteor platform which is built on nodejs, I also ran it in standard nodejs project, same error