A React hook that exposes the user's mouse position

useMousePosition.tsx

import { useCallback, useRef, useState } from "react";

const useMousePosition = () => {
  const [mousePosition, setMousePosition] = useState({
    left: 0,
    top: 0,
  });

  const handleMouseMove = useCallback(
    (e) =>
      setMousePosition({
        left: e.pageX,
        top: e.pageY,
      }),
    []
  );

  const ref = useRef();

  const callbackRef = useCallback(
    (node) => {
      if (ref.current) {
        ref.current.removeEventListener("mousemove", handleMouseMove);
      }

      ref.current = node;

      if (ref.current) {
        ref.current.addEventListener("mousemove", handleMouseMove);
      }
    },
    [handleMouseMove]
  );

  return [callbackRef, mousePosition];
};

export default useMousePosition;

// An example below on how to use it:

// const App = () => {
//   const [ref, mousePosition] = useMousePosition();

//   useEffect(() => {
//     // do something with the mouse position values here
//     console.log(mousePosition);
//   }, [mousePosition]);
  
//   return (<div className="App" ref={ref} />);
// };

// export default App;