@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
34 lines (33 loc) • 980 B
JavaScript
"use client";
import { useCallback, useRef, useState } from "react";
//#region packages/@mantine/hooks/src/use-hover/use-hover.ts
function useHover() {
const [hovered, setHovered] = useState(false);
const previousNode = useRef(null);
const handleMouseEnter = useCallback(() => {
setHovered(true);
}, []);
const handleMouseLeave = useCallback(() => {
setHovered(false);
}, []);
return {
ref: useCallback((node) => {
if (previousNode.current) {
previousNode.current.removeEventListener("mouseenter", handleMouseEnter);
previousNode.current.removeEventListener("mouseleave", handleMouseLeave);
}
if (node) {
node.addEventListener("mouseenter", handleMouseEnter);
node.addEventListener("mouseleave", handleMouseLeave);
}
previousNode.current = node;
return () => {
previousNode.current = null;
};
}, [handleMouseEnter, handleMouseLeave]),
hovered
};
}
//#endregion
export { useHover };
//# sourceMappingURL=use-hover.mjs.map