CatchGlobalClick.jsx

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

class CatchGlobalClick extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    children: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.node),
      PropTypes.node
    ])
  }

  componentWillMount() {
    document.addEventListener('click', this.handleGlobalClick, false);
  }


  componentWillUnmount() {
    document.removeEventListener('click', this.handleGlobalClick, false);
  }

  handleGlobalClick = (event) => {
    if (this.element && !this.element.contains(event.target)) {
      if (this.props.onClick) {
        this.props.onClick();
      }
    }
  }

  render() {
    return (
      <div ref={(e) => { this.element = e; }}>
        {this.props.children}
      </div>
    );
  }
}

export default CatchGlobalClick;