@modern-kit/react/dist/hooks/useHover/index.mjs

modern-kit/react

import { useState, useRef } from 'react';
import { noop } from '@modern-kit/utils';
import { useEventListener } from '../useEventListener/index.mjs';
import { usePreservedCallback } from '../usePreservedCallback/index.mjs';
import '../useIsomorphicLayoutEffect/index.mjs';

function useHover({
  onEnter = noop,
  onLeave = noop
} = {}) {
  const [isHovered, setIsHovered] = useState(false);
  const targetRef = useRef(null);
  const preservedEnterAction = usePreservedCallback((event) => {
    setIsHovered(true);
    onEnter(event);
  });
  const preservedLeaveAction = usePreservedCallback((event) => {
    setIsHovered(false);
    onLeave(event);
  });
  useEventListener(targetRef, "mouseenter", preservedEnterAction);
  useEventListener(targetRef, "mouseleave", preservedLeaveAction);
  return { ref: targetRef, isHovered };
}

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