clickawaylistener v1.0.4

This is Separate from Material-UI Click Away Listener

ClickAwayListener

Listen for click events that occur somewhere in the document, outside of the element itself.

Usage

npm install --save clickawaylistener

class ClickAway extends React.Component {
  state = {
    open: false,
  };

  handleClick = () => {
    this.setState(state => ({
      open: !state.open,
    }));
  };

  handleClickAway = () => {
    this.setState({
      open: false,
    });
  };

  render() {
    const { open } = this.state;

    return (
      <ClickAwayListener onClickAway={this.handleClickAway}>
        <div>
          <button onClick={this.handleClick}>Open menu</button>
          {open ? (
            <div>...</div>
          ) : null}
        </div>
      </ClickAwayListener>
    );
  }
}

Document