use-closable.js

import { useRef, useEffect } from 'react';

// Dispatch onClose callback when clicking outside a referenced element or hitting escape.
// Useful for dismissable dropdowns or overlays prompts.
export const useClosable = onClose => {
  const ref = useRef();
  const handleClick = e => {
    if (!ref.current?.contains(e.target)) {
      onClose(e);
    }
  };
  const handleKeyUp = e => {
    if (e.key === 'Escape') {
      onClose(e);
    }
  };
  useEffect(() => {
    document.addEventListener('click', handleClick);
    document.addEventListener('keyup', handleKeyUp);
    return () => {
      document.removeEventListener('click', handleClick);
      document.removeEventListener('keyup', handleKeyUp);
    };
  }, []);
  return ref;
};