useHover

useHover (호버 감지)

useHover 훅은 주어진 요소가 호버되었는지 감지해요. hovered와 ref를 반환해요.

출처: 문서

본문

useHover 훅을 사용해 요소가 호버되었는지 감지할 수 있어요.

import { useHover } from '@mantine/hooks';

function Demo() {
  const { hovered, ref } = useHover();
  return (
    <div ref={ref}>
      {hovered ? 'I am hovered' : 'Put mouse over me please'}
    </div>
  );
}

정의 (Definition)

interface UseHoverReturnValue {
  hovered: boolean;
  ref: React.RefCallback;
}

function useHover(): UseHoverReturnValue

Exported types

UseHoverReturnValue 타입은 @mantine/hooks에서 내보내져요.

import type { UseHoverReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)