posted 3 months ago
react-simple-typewriter는 React 애플리케이션에서 타자기처럼 텍스트를 입력하는 시각적 효과를 쉽게 구현할 수 있는 라이브러리입니다. 이를 통해 사용자 경험을 향상시키고 텍스트 콘텐츠를 돋보이게 할 수 있습니다.
React 애플리케이션에 타이프라이팅 효과를 추가하려면, npm을 통해 설치합니다
npm i react-simple-typewriter
Typewriter 컴포넌트를 import하고, 'words' prop에 타이핑할 단어나 문장의 배열을 전달하여 사용합니다.
import Typewriter from 'react-simple-typewriter'
function MyComponent() {
return (
<Typewriter
words={['Hello', 'World', 'This', 'is', 'a', 'Typewriter']}
typeSpeed={70}
deleteSpeed={50}
delaySpeed={1000}
loop={true}
cursor={true}
cursorStyle='\_'
cursorBlinking={true}
onLoopDone={() => console.log('Loop Finished')}
onType={(word) => console.log(`Typing: ${word}`)}
onDelay={() => console.log('Delay')}
onDelete={(word) => console.log(`Deleting: ${word}`)}
/>
)
}
예시
'react-simple-typewriter' 라이브러리를 이용하여 다양한 문구를 자동으로 타이핑하는 컴포넌트를 만들었습니다. "Let's Play Together", "Let's Make Together", 그리고 "Welcome to KAKAO.GG" 이라는 문구들이 순서대로 타이핑되고, 모든 문구가 타이핑된 후에는 처음으로 돌아가서 반복합니다.
import React from 'react'
import { Cursor, Typewriter } from 'react-simple-typewriter'
function AutoWriter() {
return (
<div>
<h1>
<span className="text-5xl font-semibold lg:text-6xl">
<Typewriter
words={[
"Let's Play Together",
"Let's Make Together",
'Welcome to KAKAO.GG',
]}
loop={true}
cursorStyle="\_"
typeSpeed={70}
deleteSpeed={50}
delaySpeed={1000}
/>
</span>
<Cursor cursorColor="#F7AB0A" />
</h1>
</div>
)
}
export default AutoWriter