@modern-kit/react/dist/hooks/useMouse/index.mjs

modern-kit/react

import { useRef, useState, useCallback } from 'react';
import { useEventListener } from '../useEventListener/index.mjs';
import '../usePreservedCallback/index.mjs';
import '../useIsomorphicLayoutEffect/index.mjs';
import '@modern-kit/utils';

const initialCursorPosition = {
  screenX: null,
  screenY: null,
  clientX: null,
  clientY: null,
  pageX: null,
  pageY: null,
  elementRelativeX: null,
  elementRelativeY: null,
  elementPositionX: null,
  elementPositionY: null
};
function useMouse() {
  const targetRef = useRef(null);
  const [cursorPosition, setCursorPosition] = useState(
    initialCursorPosition
  );
  const handleMouseMove = useCallback((event) => {
    const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
    let elementRelativeX = null;
    let elementRelativeY = null;
    let elementPositionX = null;
    let elementPositionY = null;
    if (targetRef.current) {
      const clientRect = targetRef.current.getBoundingClientRect();
      elementRelativeX = clientX - clientRect.left;
      elementRelativeY = clientY - clientRect.top;
      elementPositionX = clientRect.left + window.scrollX;
      elementPositionY = clientRect.top + window.scrollY;
    }
    setCursorPosition({
      screenX,
      screenY,
      clientX,
      clientY,
      pageX,
      pageY,
      elementRelativeX,
      elementRelativeY,
      elementPositionX,
      elementPositionY
    });
  }, []);
  useEventListener(
    typeof document !== "undefined" ? document : null,
    "mousemove",
    handleMouseMove
  );
  return { ref: targetRef, position: cursorPosition };
}

export { useMouse };
//# sourceMappingURL=index.mjs.map