Skip to content
Docs
훅으로 돌아가기

useRepeat

@hua-labs/hua/motion

반복 애니메이션 제어 — 무한 루프 또는 N회 반복

설치

bash
npm install @hua-labs/hua
Import
tsx
import { useRepeat } from "@hua-labs/hua/framework";

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

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

기본 사용법

tsx
const repeat = useRepeat({ type: "pulse", intensity: 0.1 });

return (
  <div ref={repeat.ref} style={repeat.style}>
    Pulsing element
  </div>
);

라이브 데모

무한 루프 데모

count: -1 (infinite)

횟수 지정 데모

count: 3

반복: 0/3

API 레퍼런스

옵션

이름타입기본값설명
type"pulse" | "bounce" | "wave" | "fade""pulse"docs:hooks.use-repeat.options.type
durationnumber1000docs:hooks.use-repeat.options.duration
delaynumber0docs:hooks.use-repeat.options.delay
intensitynumber0.1docs:hooks.use-repeat.options.intensity
autoStartbooleantruedocs:hooks.use-repeat.options.autoStart

반환값

이름타입설명
refRefObject<T | null>docs:hooks.use-repeat.returns.ref
styleCSSPropertiesdocs:hooks.use-repeat.returns.style
isVisiblebooleandocs:hooks.use-repeat.returns.isVisible
isAnimatingbooleandocs:hooks.use-repeat.returns.isAnimating
progressnumberdocs:hooks.use-repeat.returns.progress
start() => voiddocs:hooks.use-repeat.returns.start
stop() => voiddocs:hooks.use-repeat.returns.stop
reset() => voiddocs:hooks.use-repeat.returns.reset

사용 사례

로딩 스피너

무한 회전 스피너

반복 애니메이션

무한 반복 배경 효과

주목 인디케이터

배지, 알림 점 강조

배경 효과

동적 배경 그래디언트 애니메이션