useHover

요소의 hover 상태를 관리하는 Hook입니다. 마우스가 요소 위에 있을 때의 상태 변화와 콜백 함수 실행을 처리합니다.

Props

이름	타입	설명
onHoverStart	`() => void`	hover 시작 시 호출되는 콜백 함수
onHoverEnd	`() => void`	hover 종료 시 호출되는 콜백 함수

Return

targetRef: hover 상태를 감지할 요소에 연결할 ref 객체
isHovered: 현재 hover 상태를 나타내는 boolean 값

Usage

import { useHover } from '@teamsparta/react';
 
function Example() {
  const { targetRef, isHovered } = useHover({
    onHoverStart: () => console.log('hover 시작'),
    onHoverEnd: () => console.log('hover 종료'),
  });
 
  return (
    <div ref={targetRef}>
      {isHovered ? '마우스가 올라왔습니다!' : '마우스를 올려보세요'}
    </div>
  );
}

Example

호버 시 툴팁 표시

function Tooltip() {
  const { targetRef, isHovered } = useHover();
 
  return (
    <div ref={targetRef}>
      마우스를 올려보세요
      {isHovered && (
        <div className="tooltip">여기에 툴팁 내용이 표시됩니다</div>
      )}
    </div>
  );
}

이미지 호버 효과

function HoverImage() {
  const { targetRef, isHovered } = useHover();
 
  return (
    <div
      ref={targetRef}
      style={{
        transform: isHovered ? 'scale(1.1)' : 'scale(1)',
        transition: 'transform 0.2s',
      }}
    >
      <img src="image.jpg" alt="호버 효과가 있는 이미지" />
    </div>
  );
}

useDocumentVisibility useIntersectionObserver