useStagger

@hua-labs/hua/motion

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useStagger } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

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

기본 사용법

tsx

const stagger = useStagger({ count: items.length, staggerDelay: 100 });

return (
  <div ref={stagger.containerRef}>
    {items.map((item, i) => (
      <div style={stagger.styles[i]} key={i}>{item.name}</div>
    ))}
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
count	number	-	docs:hooks.use-stagger.options.count
staggerDelay	number	100	docs:hooks.use-stagger.options.staggerDelay
baseDelay	number	0	docs:hooks.use-stagger.options.baseDelay
duration	number	700	docs:hooks.use-stagger.options.duration
motionType	"fadeIn" \| "slideUp" \| "slideLeft" \| "slideRight" \| "scaleIn" \| "bounceIn"	"fadeIn"	docs:hooks.use-stagger.options.motionType
threshold	number	0.1	docs:hooks.use-stagger.options.threshold
easing	string	"ease-out"	docs:hooks.use-stagger.options.easing

반환값

이름	타입	설명
containerRef	RefObject<HTMLDivElement \| null>	docs:hooks.use-stagger.returns.containerRef
styles	CSSProperties[]	docs:hooks.use-stagger.returns.styles
isVisible	boolean	docs:hooks.use-stagger.returns.isVisible

사용 사례

메뉴 항목

메뉴 항목 캐스케이드 등장

useCardList useSimplePageMotion