react-simple-typewriter(日本語)

react-simple-typewriter は、React ベースのアプリケーションで簡単にタイプライターエフェクトを実装することができるライブラリです。このライブラリを使用すると、テキストがタイプライターによって入力されているかのような視覚的に魅力的な効果を作成し、ユーザーエクスペリエンスを向上させることができます。

Features

  1. 簡単な使用方法:react-simple-typewriter は、直感的で使いやすい API を提供しており、ユーザーはわずかなコードで所望のテキストに対してタイピングや消去の効果を実現することができます。特に、Typewriter コンポーネントを使用することで、数行のコードでタイピングや消去の効果を実現することができます。

  2. 幅広いカスタマイズオプション:このライブラリは、タイピング速度、消去速度、遅延時間などのさまざまなカスタマイズオプションを提供しています。これらのオプションを使用することで、ユーザーは自分のアプリケーションに最適な方法でタイピング効果を実装することができます。

  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
    Usage
    Description

    Typewriterコンポーネントをインポートして使用することができます。複数の単語や文章をタイピングする場合は、'words'プロップに配列形式で渡します。

Cautions

  • Name
    Animation Duration
    Type
    Cautions
    Description

    Typewriterは、デフォルトで各単語を50msの間隔でタイピングします。この値は'typeSpeed'プロップを使用して調整することができます。値が大きいほどタイピング速度が遅くなります。

  • Name
    Pause Time
    Type
    Cautions
    Description

    各単語をタイピングした後、一定時間待機することができます。これは'pauseFor'プロップを使用して設定することができます。単位はミリ秒です。

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 として渡されます。

Explanation

  • Name
    words
    Type
    Customization
    Description

    タイピングされる単語または文章の配列です。順番にタイピングされ、すべての単語がタイピングされた後に最初から再び始まります。

  • Name
    typeSpeed
    Type
    Customization
    Description

    単語をタイピングする速度を設定します。値が大きいほどタイピング速度が遅くなります。デフォルト値は 50ms です。

  • Name
    deleteSpeed
    Type
    Customization
    Description

    タイピングされた単語を削除する速度を設定します。値が大きいほど削除速度が遅くなります。デフォルト値は 50ms です。

  • Name
    delaySpeed
    Type
    Customization
    Description

    単語をタイピングした後、次の単語をタイピングするまでの待機時間です。単位はミリ秒です。

  • Name
    loop
    Type
    Customization
    Description

    すべての単語がタイピングされた後に最初から再びタイピングするかどうかを設定します。デフォルト値は false です。

  • Name
    cursor
    Type
    Customization
    Description

    タイピングカーソルを表示するかどうかを設定します。デフォルト値は true です。

  • Name
    cursorStyle
    Type
    Customization
    Description

    タイピングカーソルのスタイルを設定します。デフォルト値は '|' です。

  • Name
    cursorBlinking
    Type
    Customization
    Description

    タイピングカーソルの点滅効果を適用するかどうかを設定します。デフォルト値は true です。

  • Name
    onLoopDone
    Type
    Customization
    Description

    すべての単語のタイピングが完了し、loop が true の場合に、次のループが開始される前に呼び出されるコールバック関数を設定できます。

  • Name
    onType
    Type
    Customization
    Description

    各単語がタイピングされる間に呼び出されるコールバック関数を設定できます。

  • Name
    onDelay
    Type
    Customization
    Description

    delaySpeed の時間待機中に呼び出されるコールバック関数を設定できます。

  • Name
    onDelete
    Type
    Customization
    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" という文言が順番にタイピングされ、すべての文言がタイピングされた後に最初に戻って繰り返されます。

Additional Explanation

  • Name
    Typewriter
    Type
    Example
    Description

    Typewriter コンポーネントには、タイピングされる文言を配列として渡し、タイピング速度、削除速度、各文言の待機時間、繰り返しの有無などを設定することができます。

  • Name
    Cursor
    Type
    Example
    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