useSkeleton

@hua-labs/hua/motion

스켈레톤 로딩 UI 상태 관리

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const skeleton = useSkeleton({
  height: 20,
  width: "100%",
  borderRadius: 4,
  wave: true,
});

return (
  <div>
    {isLoading ? (
      <div ref={skeleton.ref} style={skeleton.style} />
    ) : (
      <p>{content}</p>
    )}
  </div>
);

docs:hooks.use-skeleton.examples.cardSkeletonPlaceholder

tsx

function CardSkeleton() {
  const titleSkeleton = useSkeleton({ height: 24, width: "60%", borderRadius: 4 });
  const lineSkeleton1 = useSkeleton({ height: 16, width: "100%", borderRadius: 4 });
  const lineSkeleton2 = useSkeleton({ height: 16, width: "80%", borderRadius: 4 });
  const imageSkeleton = useSkeleton({ height: 160, width: "100%", borderRadius: 8 });

  return (
    <div className="p-4 border rounded-lg space-y-3">
      <div ref={imageSkeleton.ref} style={imageSkeleton.style} />
      <div ref={titleSkeleton.ref} style={titleSkeleton.style} />
      <div ref={lineSkeleton1.ref} style={lineSkeleton1.style} />
      <div ref={lineSkeleton2.ref} style={lineSkeleton2.style} />
    </div>
  );
}

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	1500	docs:hooks.use-skeleton.options.duration
easing	string	"ease-in-out"	docs:hooks.use-skeleton.options.easing
backgroundColor	string	"#f0f0f0"	docs:hooks.use-skeleton.options.backgroundColor
highlightColor	string	"#e0e0e0"	docs:hooks.use-skeleton.options.highlightColor
motionSpeed	number	1500	docs:hooks.use-skeleton.options.motionSpeed
height	number	20	docs:hooks.use-skeleton.options.height
width	number \| string	"100%"	docs:hooks.use-skeleton.options.width
borderRadius	number	4	docs:hooks.use-skeleton.options.borderRadius
wave	boolean	true	docs:hooks.use-skeleton.options.wave
pulse	boolean	false	docs:hooks.use-skeleton.options.pulse
autoStart	boolean	true	docs:hooks.use-skeleton.options.autoStart

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-skeleton.returns.ref
style	CSSProperties	docs:hooks.use-skeleton.returns.style
isVisible	boolean	docs:hooks.use-skeleton.returns.isVisible
isAnimating	boolean	docs:hooks.use-skeleton.returns.isAnimating
progress	number	docs:hooks.use-skeleton.returns.progress
start	() => void	docs:hooks.use-skeleton.returns.start
stop	() => void	docs:hooks.use-skeleton.returns.stop
reset	() => void	docs:hooks.use-skeleton.returns.reset
pause	() => void	docs:hooks.use-skeleton.returns.pause
resume	() => void	docs:hooks.use-skeleton.returns.resume

사용 사례

로딩 상태

데이터 로딩 중 시각적 피드백

콘텐츠 플레이스홀더

로딩 중 스켈레톤 UI 표시

카드 리스트

카드 그리드 스태거 애니메이션

데이터 페칭

API 요청 중 로딩 인디케이터

useLoadingSpinner useOrchestrationPro