React hook and HOC for handling clicks outside your component

useOutsideClick.js

/* Hook for handling click outside your react component */
const useOutsideClick = (onOutsideClick) => {
	const elementRef = useRef(null)
	useEffect(() => {
		const handleOutsideClick = (e) => {
			if(typeof onOutsideClick === 'function' && !elementRef.current.contains(e.target)) {
				onOutsideClick(e)
			}
		}
		document.addEventListener('mousedown', handleOutsideClick, false)

		return () => {
			document.removeEventListener('mousedown', handleOutsideClick, false)
		}
	})
	return [elementRef]
}

/* Example */
const App = props => {
  const [wrapRef] = outsideClickHook(() => console.log('clicked outside!'))
  return(
    <div ref={wrapRef}>
      <MyComponent/>
    </div>
  )