A React hook for determining whether or not a section of DOM still has the users attention. It's like clickAway logic on steroids

useAttentionWithin.ts

import { useState, useEffect, RefObject } from "react";

export default function useAttentionWithin(ref: RefObject<HTMLElement>) {
  const [attentionWithin, setAttentionWithin] = useState(false);

  function handleAttentionLeave({ target }: Event) {
    const targetIsWithin = !!(
      ref.current && ref.current.contains(target as Node)
    );

    setAttentionWithin(targetIsWithin);
  }

  useEffect(() => {
    document.addEventListener("focusin", handleAttentionLeave);
    document.addEventListener("mouseup", handleAttentionLeave);

    return () => {
      document.removeEventListener("focusin", handleAttentionLeave);
      document.removeEventListener("mouseup", handleAttentionLeave);
    };
  }, []);

  return attentionWithin;
}