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.ref = React.createRef();
  }

  handleClick = e => {
    const isOutside = !this.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.cloneElement(element, { ref: this.ref });
  }
}