Detect when focus changes in your React app

useFocusChange.js

function useFocusChange(
  // callback (logs to console by default)
  // handleChange?: (
  //   activeElement: Element | null,
  //   previousActiveElement: Element | null,
  //   event?: FocusEvent
  // ) => void
  handleChange = console.log,
  // whether to callback on `focus` or `blur`
  // when?: 'focus' | 'blur'
  when = "focus",
  // The document object to listen on
  // ownerDocument?: Document
  ownerDocument = document
) {
  let lastActiveElement = useRef(ownerDocument.activeElement);

  useEffect(() => {
    lastActiveElement.current = ownerDocument.activeElement;

    function onChange(event) {
      if (lastActiveElement.current !== ownerDocument.activeElement) {
        typeof handleChange === "function" &&
          handleChange(
            ownerDocument.activeElement,
            lastActiveElement.current,
            event
          );
        lastActiveElement.current = ownerDocument.activeElement;
      }
    }

    ownerDocument.addEventListener(when, onChange, true);

    return () => {
      ownerDocument.removeEventListener(when, onChange);
    };
  }, [when, handleChange, ownerDocument]);
}