Handle Click Outside

handle-click-outside.tsx

const handleClickOutside = (Component, useCapture = true) => {
  return class extends React.Component {
    // Create a reference to the component instance
    instance = React.createRef()
     
    // Create a reference to the component DOM element (forwardedRef)
    node = React.createRef()
  
    componentDidMount() {
      document.addEventListener('click', this.handleClick, useCapture)
    }

    componentWillUnmount() {
      document.removeEventListener('click', this.handleClick, useCapture)
    }
  
    handleClick = event => {
      if (!this.instance || ! this.instance.current) return

      if (!this.node.current.contains(event.target)) {
        if (typeof this.instance.current.onClickOutside === 'function') {
          this.instance.current.onClickOutside(event)
        }
      }
    }

    render() {
      return (
        <Component 
          ref={this.instance}
          forwardedRef={this.node} 
          {...this.props} 
        />
      )
    }
  }
}