ClickOutside

clickoutside.jsx

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

class ClickOutside extends Component {
  static propTypes = {
    onClick: PropTypes.func
  }

  constructor(props) {
    super(props);
    this.childrenRefs = React.Children.map(this.props.children, () =>
      React.createRef()
    );
  }

  handleClick = e => {
     const isOutside = this.childrenRefs.every(
      ref => !ref.current.contains(e.target)
    );
    
    if (isOutside) {
      this.props.onClick();
    }
  };

  componentDidMount() {
    document.addEventListener("click", this.handleClick);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.handleClick);
  }

  render() {
    return React.Children.map(this.props.children, (element, idx) => {
      return React.cloneElement(element, { ref: this.childrenRefs[idx] });
    });
  }
}