@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
60 lines (59 loc) • 1.69 kB
JavaScript
"use client";
import { useCallback, useEffect, useState } from "react";
//#region packages/@mantine/hooks/src/use-mouse/use-mouse.ts
function useMouse(options = { resetOnExit: false }) {
const [position, setPosition] = useState({
x: 0,
y: 0
});
return {
ref: useCallback((node) => {
const setMousePosition = (event) => {
const mouseEvent = event;
if (node) {
const rect = node.getBoundingClientRect();
setPosition({
x: Math.max(0, Math.round(mouseEvent.pageX - rect.left - (window.scrollX || window.scrollX))),
y: Math.max(0, Math.round(mouseEvent.pageY - rect.top - (window.scrollY || window.scrollY)))
});
} else setPosition({
x: mouseEvent.clientX,
y: mouseEvent.clientY
});
};
const resetMousePosition = () => setPosition({
x: 0,
y: 0
});
node?.addEventListener("mousemove", setMousePosition);
if (options.resetOnExit) node?.addEventListener("mouseleave", resetMousePosition);
return () => {
node?.removeEventListener("mousemove", setMousePosition);
if (options.resetOnExit) node?.removeEventListener("mouseleave", resetMousePosition);
};
}, [options.resetOnExit]),
...position
};
}
function useMousePosition() {
const [position, setPosition] = useState({
x: 0,
y: 0
});
useEffect(() => {
const setMousePosition = (event) => {
setPosition({
x: event.clientX,
y: event.clientY
});
};
document.addEventListener("mousemove", setMousePosition);
return () => {
document.removeEventListener("mousemove", setMousePosition);
};
}, []);
return position;
}
//#endregion
export { useMouse, useMousePosition };
//# sourceMappingURL=use-mouse.mjs.map