useEffect hook that registers document events outside a specific component or its children

useDetectEventOutside.ts

import { RefObject, useEffect } from 'react';

export default function useDetectEventOutside<
  TNode extends Node,
  TEventType extends keyof DocumentEventMap
>(
  reference: RefObject<TNode>,
  eventType: TEventType,
  eventListener: (this: Document, ev: DocumentEventMap[TEventType]) => any
) {
  useEffect(() => {
    function handle(this: Document, event: DocumentEventMap[TEventType]) {
      if (!(event.target instanceof Node)) return;
      if (reference.current && !reference.current.contains(event.target))
        return eventListener.call(this, event);
    }
    document.addEventListener(eventType, handle);
    return () => document.removeEventListener(eventType, handle);
  }, [reference, eventType, eventListener]);
}