React hook to detect proximity to an element. https://codesandbox.io/embed/0qwjq74w0p.

useProximity.js

import { useEffect, useState } from "react";

const useProximity = (elemRef, perimeter = 100) => {
  const [withinPerimeter, setWithinPerimeter] = useState(false);

  useEffect(() => {
    if (!elemRef || !elemRef.current) return;

    let ticking = false;
    const { current } = elemRef;
    const { top, right, bottom, left } = current.getBoundingClientRect();
    const perimeterBounds = {
      top: top - perimeter,
      right: right + perimeter,
      bottom: bottom + perimeter,
      left: left - perimeter
    };

    const update = ({ clientX, clientY }) => {
      if (
        clientX > perimeterBounds.left &&
        clientX < perimeterBounds.right &&
        clientY > perimeterBounds.top &&
        clientY < perimeterBounds.bottom
      ) {
        setWithinPerimeter(true);
      } else {
        setWithinPerimeter(false);
      }

      ticking = false;
    };

    const onMousemove = event => {
      if (!ticking) {
        window.requestAnimationFrame(() => {
          update(event);
        });

        ticking = true;
      }
    };

    document.addEventListener("mousemove", onMousemove);
    return () => document.removeEventListener("mousemove", onMousemove);
  }, [elemRef, perimeter]);

  return withinPerimeter;
};