React-simple-typewriter: React에서 타이핑 애니메이션 효과 구현하기

react-simple-typewriter는 React 애플리케이션에서 타자기처럼 텍스트를 입력하는 시각적 효과를 쉽게 구현할 수 있는 라이브러리입니다. 이를 통해 사용자 경험을 향상시키고 텍스트 콘텐츠를 돋보이게 할 수 있습니다.

주요 특징

• 간단한 사용법: 직관적인 API를 통해 몇 줄의 코드만으로 타이핑 및 삭제 효과 구현이 가능합니다.
• 다양한 커스터마이징 옵션: 타이핑 속도, 삭제 속도, 딜레이 시간 등을 자유롭게 설정할 수 있어, 애플리케이션에 최적화된 타이핑 효과를 만들 수 있습니다.
• 루프 기능: 설정된 단어 목록을 순환하며 타이핑 효과를 반복할 수 있습니다.

설치 방법

React 애플리케이션에 타이프라이팅 효과를 추가하려면, npm을 통해 설치합니다

 

npm i react-simple-typewriter

 

사용 방법

Typewriter 컴포넌트를 import하고, 'words' prop에 타이핑할 단어나 문장의 배열을 전달하여 사용합니다.

커스터마이징 옵션

• words: 타이핑될 단어나 문장의 배열입니다.
• typeSpeed, deleteSpeed: 타이핑 및 삭제 속도를 조절합니다.
• delaySpeed: 단어간 대기 시간을 설정합니다.
• loop: 모든 단어 타이핑 후 반복 여부를 결정합니다.
• cursor: 타이핑 커서의 표시 여부와 스타일, 깜박임 효과 등을 설정할 수 있습니다.
• onLoopDone, onType, onDelay, onDelete: 각각의 타이핑 상황에서 호출될 콜백 함수를 설정할 수 있습니다.

 

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