@yamada-ui/react/dist/esm/hooks/use-hover/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useCallback, useEffect, useRef, useState } from "react";

//#region src/hooks/use-hover/index.ts
/**
* `useHover` is a custom hook that detects whether the pointer has moved over or away from an element.
*
* @see https://yamada-ui.com/docs/hooks/use-hover
*/
const useHover = () => {
	const [hovered, setHovered] = useState(false);
	const ref = useRef(null);
	const onMouseEnter = useCallback(() => setHovered(true), []);
	const onMouseLeave = useCallback(() => setHovered(false), []);
	useEffect(() => {
		const el = ref.current;
		if (el) {
			el.addEventListener("mouseenter", onMouseEnter);
			el.addEventListener("mouseleave", onMouseLeave);
			return () => {
				el.removeEventListener("mouseenter", onMouseEnter);
				el.removeEventListener("mouseleave", onMouseLeave);
			};
		}
	}, [onMouseEnter, onMouseLeave]);
	return {
		ref,
		hovered
	};
};

//#endregion
export { useHover };
//# sourceMappingURL=index.js.map