@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
61 lines (60 loc) • 1.74 kB
JavaScript
"use client";
let react = require("react");
//#region packages/@mantine/hooks/src/use-mouse/use-mouse.ts
function useMouse(options = { resetOnExit: false }) {
const [position, setPosition] = (0, react.useState)({
x: 0,
y: 0
});
return {
ref: (0, react.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] = (0, react.useState)({
x: 0,
y: 0
});
(0, react.useEffect)(() => {
const setMousePosition = (event) => {
setPosition({
x: event.clientX,
y: event.clientY
});
};
document.addEventListener("mousemove", setMousePosition);
return () => {
document.removeEventListener("mousemove", setMousePosition);
};
}, []);
return position;
}
//#endregion
exports.useMouse = useMouse;
exports.useMousePosition = useMousePosition;
//# sourceMappingURL=use-mouse.cjs.map