useHover

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

Code

🔗 실제 구현 코드 확인

Interface

typescript

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

Options

Name	Type	Default	Description
onEnter	(event: MouseEvent) => void	-	마우스가 요소 위로 올라갈 때 호출되는 콜백
onLeave	(event: MouseEvent) => void	-	마우스가 요소에서 벗어날 때 호출되는 콜백

Returns

Name	Type	Description
ref	React.RefObject<T | null>	대상 요소에 연결할 ref
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