Outside-click-handler NPM

OutsideClickHandler

This component is designed to handle all clicks outside, for example, to open and close modal windows.

Features

Easy to use
Tests covered
Flowtype definitions
Lightweight (2.8kb gzip)

API

The component accepts two types of props: children and callback function. At componentDidMount() adds the listener, who is waiting for the click event, and componentWillUnmount() is removed.

type Props = {
  children: React.Node,
  onOutsideClick: Function,
};

How to use

class Wrapper extends React.Component {
  onClick = () => this.setState({ isShownHidden: !this.state.isShownHidden });

  render() {
    const { isShownHidden } = this.state;
    return (
      <OutsideClickHandler onOutsideClick={this.onClick}>
        <span>Im your child!</span>
        {isShownHidden && <span>Im your hidden child!</span>}
      </OutsideClickHandler>
    );
  }
}