withClickOutside.js

const withClickOutside = ({
  refHandlerName = 'registerRef',
  clickHandlerName = 'onClick',
  onClickOutside = () => {},
}) => WrappedComponent =>
  class ClickOutside extends Component {
    constructor(props) {
      super(props);

      this.open = false;
      this.nodeRef = null;
      this.onClick = this.onClick.bind(this);
      this.registerRef = this.registerRef.bind(this);
    }

    componentWillUnmount() {
      body.removeEventListener('click', this.onClick);
    }

    onClick(event) {
      const isInside = this.nodeRef.contains(event.target);
      const isOpen = this.open;

      if (!isInside && isOpen) {
        body.removeEventListener('click', this.onClick);
        onClickOutside(this.props);
        this.open = false;
      } else if (isInside && !isOpen) {
        body.addEventListener('click', this.onClick);
        this.open = true;
      }
    }

    registerRef(ref) {
      this.nodeRef = ref;
    }

    render() {
      const props = {
        ...this.props,
        [refHandlerName]: this.registerRef,
        [clickHandlerName]: this.onClick,
      };

      return <WrappedComponent {...props} />;
    }
  };

export default withClickOutside;