Handle clicks outside of an element. Useful for elements that display overlays like datepickers.

useOutsideClick.js

import { useEffect } from 'react'

const getPath = function(event) {
	const path = []
	let currentElem = event.target
	while (currentElem) {
		path.push(currentElem)
		currentElem = currentElem.parentElement
	}
	if (path.indexOf(window) === -1 && path.indexOf(document) === -1) path.push(document)
	if (path.indexOf(window) === -1) path.push(window)
	return path
}

const useOutsideClick = (ref, cb) => {
	useEffect(() => {
		const handleClickOutside = (e) => {
			if (getPath(e).indexOf(ref.current) === -1) {
				cb()
			}
		}

		document.body.addEventListener('mousedown', handleClickOutside)
		return () => document.body.removeEventListener('mousedown', handleClickOutside)
	}, [ref.current])
}

export default useOutsideClick