detect-outside-click-react/lib/OutsideClick.jsx

Wrapper component to detect outside click

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class OutsideClick extends Component {
  constructor(props) {
    super(props);
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.props.close();
    }
  }
  render() {
    return (
      <div ref={this.setWrapperRef}>{this.props.children}</div>
    );
  }
}

OutsideClick.propTypes = {
  close: PropTypes.func,
  children: PropTypes.element.isRequired,
};

export default OutsideClick;