react-addons-clicked-away-mixin

react-addons-clicked-away-mixin

A React mixin for your React component when you need to know if the user clicks "away" from from the component.

Install

npm install react-addons-clicked-away-mixin --save

Usage

Below is a very simple example of toggling a "Menu":

CommonJS:

var ClickedAwayMixin = require('react-addons-clicked-away-mixin');
var React = require('react');
var ReactDOM = require('react-dom');

var Menu = React.createClass({

  getInitialState: function() {
    return {show: false};
  },
  
  mixins: [ClickedAwayMixin],

  render: function() {
    return (
      <div>
        <button type="button" onClick={this._toggleShow}>Toggle menu</button>
        {this.state.show && 
          <ul className="menu">
            <li>
              <a>Option A</a>
            </li>
            <li>
              <a>Option B</a>
            </li>
          </ul>
        }
      </div>
    );
  },
  
  onClickedAway: function() {
    if (this.state.open) this.setState({open: false});
  },
  
  _toggleShow: function() {
    this.setState({show: !this.state.show});
  }
  
});

var App = (
  <div>
    <Menu />
  </div>
);

ReactDOM.render(<App />, document.body);