useClickOutside.js

export function useClickOutside ({container, handler, dependencies, addListenerConditional = true}) {
  useEffect(() => {
    if(addListenerConditional) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, dependencies);

  function handleClickOutside (e) {
    if(!container.current.contains(e.target)) {
      handler()
    }
  }
}