useAnimatedEntrance

@hua-labs/ui

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

import { useAnimatedEntrance } from '@hua-labs/ui';

const { ref, style } = useAnimatedEntrance({ type: 'slideUp', duration: 500 });

return <div ref={ref} style={style}>Animated content</div>;

API 레퍼런스

옵션

이름	타입	기본값	설명
type	"fadeIn" \| "slideUp" \| "slideDown" \| "scaleIn"	"fadeIn"	docs:hooks.use-animated-entrance.options.type
duration	number	300	docs:hooks.use-animated-entrance.options.duration
delay	number	0	docs:hooks.use-animated-entrance.options.delay

반환값

이름	타입	설명
ref	RefObject<HTMLElement>	docs:hooks.use-animated-entrance.returns.ref
style	React.CSSProperties	docs:hooks.use-animated-entrance.returns.style

사용 사례

useBreakpoint useDotEnv