useInView

@hua-labs/hua/motion

Intersection Observer 기반 뷰포트 진입 감지

임계값 설정

루트 마진

한 번만 트리거

진입 데이터

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useInView } from "@hua-labs/ui";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

스크롤하여 확인하세요

뷰포트 밖에 있음

const { ref, inView } = useInView({ threshold: 0.5 });

return (
  <div ref={ref}>
    {inView ? 'In view!' : 'Not in view'}
  </div>
);

한 번만 트리거

스크롤하여 한 번 트리거하세요

대기 중...

const { ref, inView } = useInView({
  triggerOnce: true,
  threshold: 0.3
});

return (
  <div ref={ref} className={inView ? 'animate-fade-in' : 'opacity-0'}>
    Animates once when visible
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
threshold	number \| number[]	0	docs:hooks.use-in-view.options.threshold
rootMargin	string	"0px"	docs:hooks.use-in-view.options.rootMargin
triggerOnce	boolean	false	docs:hooks.use-in-view.options.triggerOnce
initialInView	boolean	false	docs:hooks.use-in-view.options.initialInView

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-in-view.returns.ref
inView	boolean	docs:hooks.use-in-view.returns.inView
entry	IntersectionObserverEntry \| null	docs:hooks.use-in-view.returns.entry

사용 사례

지연 로딩

뷰포트 진입 시 콘텐츠 로드

스크롤 애니메이션

스크롤 기반 요소 애니메이션

무한 스크롤

스크롤 하단 도달 시 데이터 로드

분석

요소 노출 시간 및 조회율 추적

usePageTransitionManagerPro useScrollProgress