react-use-mouse-move/src/UseMouseMove.js

Custom react hook to capture mouse move events, with throttling and ability to target individual element or window

import { useEffect, useState, useMemo } from 'react';

function useMouseMove(throttle, targetPos, targetId) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  let prevPos = pos;

  throttle = useMemo(() => Math.max(1, Math.min(throttle, 10)), [throttle]);

  const throttlePos = (prevPos, x, y) => {
    return {
      x: Math.abs(prevPos.x - x) % throttle === 0 ? x : prevPos.x,
      y: Math.abs(prevPos.y - y) % throttle === 0 ? y : prevPos.y
    };
  }

  const moveHandler = (evt) => {
    const { altKey, ctrlKey, metaKey, shiftKey } = evt;
    const { x, y } = throttlePos(
      prevPos,
      evt[targetPos ? `${targetPos}X` : 'x'],
      evt[targetPos ? `${targetPos}Y` : 'y']
    );

    const nextPos = {
      x,
      y,
      keydown: {
        altKey,
        ctrlKey,
        metaKey,
        shiftKey
      }
    };

    if (prevPos !== nextPos) {
      setPos(nextPos);
      prevPos = nextPos;
    }
  }

  useEffect(() => {
    let targetElement = window;
    if (targetId) {
      targetElement = document.getElementById(targetId)
    }

    targetElement.addEventListener('mousemove', moveHandler);
    return () => {
      targetElement.removeEventListener('mousemove', moveHandler);
    };
  }, []);

  return pos;
}

export { useMouseMove }