common-hook/es/dom/useHover.js

提供项目中常用的 React Hooks

import { useBoolean, useEventListener } from "common-hook";
/**
 * @name 监听DOM元素是否鼠标悬停
 * @example
 * const isHovering = useHover(ref)
 */
export const useHover = (target, options) => {
    const { onEnter, onLeave, onChange } = options || {};
    const [state, { setTrue, setFalse }] = useBoolean(false);
    useEventListener("mouseenter", () => {
        onEnter === null || onEnter === void 0 ? void 0 : onEnter();
        setTrue();
        onChange === null || onChange === void 0 ? void 0 : onChange(true);
    }, {
        target
    });
    useEventListener("mouseleave", () => {
        onLeave === null || onLeave === void 0 ? void 0 : onLeave();
        setFalse();
        onChange === null || onChange === void 0 ? void 0 : onChange(false);
    }, {
        target
    });
    return state;
};