useTypewriter

@hua-labs/hua/motion

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const { displayText, isTyping } = useTypewriter({
  text: "Hello, world!",
  speed: 50,
});

return (
  <h1>
    {displayText}
    {isTyping && <span className="animate-pulse">|</span>}
  </h1>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
text	string	-	docs:hooks.use-typewriter.options.text
speed	number	50	docs:hooks.use-typewriter.options.speed
delay	number	0	docs:hooks.use-typewriter.options.delay
enabled	boolean	true	docs:hooks.use-typewriter.options.enabled
onComplete	() => void	-	docs:hooks.use-typewriter.options.onComplete

반환값

이름	타입	설명
displayText	string	docs:hooks.use-typewriter.returns.displayText
isTyping	boolean	docs:hooks.use-typewriter.returns.isTyping
progress	number	docs:hooks.use-typewriter.returns.progress
restart	() => void	docs:hooks.use-typewriter.returns.restart

사용 사례

useSkeleton useCountUp