@storm-stack/hooks
Version:
A collection of React hooks used by Storm Software in various client libraries and applications.
33 lines (32 loc) • 990 B
JavaScript
import { useCallback, useRef, useState } from "react";
export const useHover = () => {
const [hovering, setHovering] = useState(false);
const previousNode = useRef(null);
const handleMouseEnter = useCallback(() => {
setHovering(true);
}, []);
const handleMouseLeave = useCallback(() => {
setHovering(false);
}, []);
const customRef = useCallback(
(node) => {
if (previousNode.current?.nodeType === Node.ELEMENT_NODE) {
previousNode.current.removeEventListener(
"mouseenter",
handleMouseEnter
);
previousNode.current.removeEventListener(
"mouseleave",
handleMouseLeave
);
}
if (node?.nodeType === Node.ELEMENT_NODE) {
node.addEventListener("mouseenter", handleMouseEnter);
node.addEventListener("mouseleave", handleMouseLeave);
}
previousNode.current = node;
},
[handleMouseEnter, handleMouseLeave]
);
return [customRef, hovering];
};