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

modern-kit/react

'use strict';

var React = require('react');
var hooksUseEventListener = require('../useEventListener/index.cjs');
require('../usePreservedCallback/index.cjs');
require('../useIsomorphicLayoutEffect/index.cjs');
require('@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 = React.useRef(null);
  const [cursorPosition, setCursorPosition] = React.useState(
    initialCursorPosition
  );
  const handleMouseMove = React.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
    });
  }, []);
  hooksUseEventListener.useEventListener(
    typeof document !== "undefined" ? document : null,
    "mousemove",
    handleMouseMove
  );
  return { ref: targetRef, position: cursorPosition };
}

exports.useMouse = useMouse;
//# sourceMappingURL=index.cjs.map