const React = require('react');
var Plotly = require('plotly.js');

var PlotlyComponent = React.createClass({

  displayName: 'Plotly',
  propTypes: {
    data: React.PropTypes.array,
    layout: React.PropTypes.object,
    config: React.PropTypes.object
  },

  shouldComponentUpdate(nextProps) {
    //TODO logic for detecting change in props
    return true;
  },

  componentDidMount() {
    let {data, layout, config} = this.props;
    Plotly.plot(this.container, data, layout, config);
  },

  componentDidUpdate() {
    //TODO use minimal update for given changes
    this.container.data = this.props.data;
    this.container.layout = this.props.layout;
    Plotly.redraw(this.container);

  },

  render: function () {
    let {data, layout, config, ...other } = this.props;
    return <div {...other} ref={(node) => this.container=node} />
  }
});

module.exports = PlotlyComponent;

@@ -247,16 +247,202 @@
 s.object
+,%0A    onClick: React.PropTypes.func,%0A    onBeforeHover: React.PropTypes.func,%0A    onHover: React.PropTypes.func,%0A    onUnHover: React.PropTypes.func,%0A    onSelected: React.PropTypes.func
 %0A  %7D,%0A%0A 
@@ -677,210 +677,976 @@
 ;%0A  
-%7D,%0A%0A  componentDidUpdate() %7B%0A    //TODO use minimal update for given changes%0A    this.container.data = this.props.data;%0A    this.container.layout = this.props.layout;%0A    Plotly.redraw(this.container);%0A
+  this.props.onClick && this.container.on('plotly_click', this.props.onClick);%0A    this.props.onBeforeHover && this.container.on('plotly_beforehover', this.props.onBeforeHover);%0A    this.props.onHover && this.container.on('plotly_hover', this.props.onHover);%0A    this.props.onUnHover && this.container.on('plotly_unhover', this.props.onUnHover);%0A    this.props.onSelected && this.container.on('plotly_selected', this.props.onSelected);%0A  %7D,%0A%0A  componentDidUpdate() %7B%0A    //TODO use minimal update for given changes%0A    this.container.data = this.props.data;%0A    this.container.layout = this.props.layout;%0A    Plotly.redraw(this.container);%0A  %7D,%0A%0A  componentWillUnmount: function() %7B%0A    this.container.removeAllListeners('plotly_click');%0A    this.container.removeAllListeners('plotly_beforehover');%0A    this.container.removeAllListeners('plotly_hover');%0A    this.container.removeAllListeners('plotly_unhover');%0A    this.container.removeAllListeners('plotly_selected');
 %0A  %7D

Add event handling