@ducor/hooks/dist/use-hover/index.js

A collection of useful React hooks for building modern web applications. Includes hooks for clipboard operations, window events, intervals, timeouts, and more.

import { useCallback, useEffect, useRef, useState } from "react";
/**
 * `useHover` is a custom hook that detects whether the pointer has moved over or away from an element.
 *
 * @see Docs https://ui.ducor.net/hooks/use-hover
 */
const useHover = (props) => {
    const [hovered, setHovered] = useState(false);
    const ref = props && props.ref ? props.ref : useRef(null);
    const disabled = Boolean(props && props.disabled);
    const onMouseEnter = useCallback(() => setHovered(true), []);
    const onMouseLeave = useCallback(() => setHovered(false), []);
    useEffect(() => {
        if (disabled) {
            return;
        }
        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 };
};
export default useHover;