useHover

대상 컴포넌트를 기준으로 마우스가 올라가거나 내려갔을 때의 상태를 반환하고, 마우스가 올라가거나 내려갔을 때의 액션을 정의할 수 있는 커스텀 훅입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

const useHover: <T extends HTMLElement>({
  onEnter?: (event: MouseEvent) => void,
  onLeave?: (event: MouseEvent) => void,
}) => {
  ref: T,
  isHovered: boolean
}

Usage

typescript

import { useHover } from '@modern-kit/react';

const Example = () => {
  const [counter, setCounter] = useState(0);

  const { ref, isHovered } = useHover<HTMLDivElement>({
    onEnter: () => setCounter((count) => count + 1),
    onLeave: () => setCounter((count) => count - 1)
  });

  const style = {
    width: '200px',
    height: '200px',
    backgroundColor: 'skyBlue'
  };

  return (
    <>
      <div ref={ref} style={style}>{isHovered ? 'hover' : 'leave'}</div>
      <div>{counter}</div>
    </>
  );
};

Example

leave

0