react-simple-typewriter(한국어)

react-simple-typewriter는 React 기반의 애플리케이션에서 간단하게 타이프라이팅 효과를 구현할 수 있는 라이브러리입니다. 해당 라이브러리를 사용하면 텍스트가 마치 타자기로 입력되는 것 같은 시각적 효과를 만들어 사용자 경험을 풍부하게 만들 수 있습니다.

Features

  1. 간단한 사용법: react-simple-typewriter는 단순하면서도 직관적인 API를 제공하여 사용자가 쉽게 타이핑 효과를 구현할 수 있습니다. 특히, Typewriter 컴포넌트를 사용하면 단 몇 줄의 코드만으로 원하는 텍스트를 타이핑하고 지우는 효과를 만들어낼 수 있습니다.

  2. 많은 커스터마이징 옵션: 이 라이브러리는 타이핑 속도, 삭제 속도, 딜레이 시간 등 다양한 aspect를 커스터마이징 할 수 있는 옵션을 제공합니다. 이를 통해 사용자는 자신의 애플리케이션에 가장 적합한 방식으로 타이핑 효과를 구현할 수 있습니다.

  3. 루프 기능: react-simple-typewriter는 주어진 단어 목록을 순환하면서 타이핑 효과를 반복하는 루프 기능을 제공합니다. 이를 통해 사용자는 한 번의 설정으로 계속해서 변하는 텍스트를 표현할 수 있습니다.


Installation

npm i react-simple-typewriter는 React 애플리케이션에서 타이프라이팅 효과를 간단하게 구현하기 위해 설치가 필요합니다.

Installation

npm i react-simple-typewriter

Usage

'react-simple-typewriter' 라이브러리는 React 애플리케이션에서 간단하고 멋진 타이핑 애니메이션을 구현하는 데 사용됩니다. 이는 사용자의 경험을 더욱 향상시키고 텍스트를 독특한 방식으로 강조하는 데 도움이 될 수 있습니다.

  • Name
    Typewriter import
    Type
    사용법
    Description

    Typewriter 컴포넌트를 import하여 사용할 수 있습니다. 여러 단어나 문장을 타이핑하려면 'words' prop에 배열 형식으로 전달합니다.

주의 사항

  • Name
    Animation Duration
    Type
    주의 사항
    Description

    Typewriter는 기본적으로 각 단어를 50ms 간격으로 타이핑합니다. 이 값은 'typeSpeed' prop을 통해 조절할 수 있습니다. 값이 클수록 타이핑 속도가 느려집니다.

  • Name
    Pause Time
    Type
    주의 사항
    Description

    각 단어를 타이핑한 후 일정 시간동안 대기할 수 있습니다. 이는 'pauseFor' prop을 통해 설정할 수 있으며, 단위는 밀리세컨드입니다.

Usage

import Typewriter from 'react-simple-typewriter'

function MyComponent() {
  return (
    <Typewriter
      words={['Hello', 'World', 'This', 'is', 'a', 'Typewriter']}
      loop={true}
      cursor
      cursorStyle='_'
      typeSpeed={70}
      deleteSpeed={50}
      delaySpeed={1000}
    />
  )
}

Customization

'react-simple-typewriter' 라이브러리는 타이핑 애니메이션을 상세히 사용자화할 수 있는 다양한 옵션을 제공합니다. 각각의 옵션은 Typewriter 컴포넌트의 props로 전달됩니다.

설명

  • Name
    words
    Type
    사용자화
    Description

    타이핑될 단어 또는 문장의 배열입니다. 순서대로 타이핑되며, 모든 단어가 타이핑된 후에는 처음으로 돌아갑니다.

  • Name
    typeSpeed
    Type
    사용자화
    Description

    단어를 타이핑하는 속도를 결정합니다. 값이 클수록 타이핑 속도가 느려집니다. 기본값은 50ms입니다.

  • Name
    deleteSpeed
    Type
    사용자화
    Description

    타이핑된 단어를 지우는 속도를 결정합니다. 값이 클수록 지우는 속도가 느려집니다. 기본값은 50ms입니다.

  • Name
    delaySpeed
    Type
    사용자화
    Description

    단어를 타이핑한 후 다음 단어를 타이핑하기 전까지의 대기 시간입니다. 단위는 밀리세컨드입니다.

  • Name
    loop
    Type
    사용자화
    Description

    모든 단어가 타이핑된 후에 다시 처음부터 타이핑할 것인지 결정합니다. 기본값은 false입니다.

  • Name
    cursor
    Type
    사용자화
    Description

    타이핑 커서를 보여줄 것인지 결정합니다. 기본값은 true입니다.

  • Name
    cursorStyle
    Type
    사용자화
    Description

    타이핑 커서의 스타일을 결정합니다. 기본값은 '|'입니다.

  • Name
    cursorBlinking
    Type
    사용자화
    Description

    타이핑 커서가 깜박이는 효과를 적용할 것인지 결정합니다. 기본값은 true입니다.

  • Name
    onLoopDone
    Type
    사용자화
    Description

    모든 단어의 타이핑이 완료되고 loop가 true인 경우, 다음 루프가 시작하기 전에 호출될 콜백 함수를 설정할 수 있습니다.

  • Name
    onType
    Type
    사용자화
    Description

    각 단어가 타이핑되는 동안 호출될 콜백 함수를 설정할 수 있습니다.

  • Name
    onDelay
    Type
    사용자화
    Description

    delaySpeed 시간 동안 대기하는 동안 호출될 콜백 함수를 설정할 수 있습니다.

  • Name
    onDelete
    Type
    사용자화
    Description

    각 단어가 지워지는 동안 호출될 콜백 함수를 설정할 수 있습니다.

Customization

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}`)}
    />
  )
}

Example

이 예시에서는 'react-simple-typewriter' 라이브러리를 이용하여 다양한 문구를 자동으로 타이핑하는 컴포넌트를 만들었습니다. "Let's Play Together", "Let's Make Together", 그리고 "Welcome to KAKAO.GG" 이라는 문구들이 순서대로 타이핑되고, 모든 문구가 타이핑된 후에는 처음으로 돌아가서 반복합니다.

추가 설명

  • Name
    Typewriter
    Type
    예시
    Description

    Typewriter 컴포넌트에는 타이핑될 문구를 배열로 전달하고, 타이핑 속도, 삭제 속도, 각 문구의 대기 시간, 반복 여부 등을 설정할 수 있습니다.

  • Name
    Cursor
    Type
    예시
    Description

    Cursor 컴포넌트를 사용하여 타이핑 커서의 색상을 설정할 수 있습니다. 여기서는 '#F7AB0A'로 커서 색상을 설정하였습니다.

/developer.jsx

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