【React】Type-Writer Effect

> A simple react component for adding a nice typewriter effect to your project.

訳： 「プロジェクトに素敵なタイプライター効果を加えるためのシンプルなReactコンポーネント。」
とのこと。

https://www.npmjs.com/package/react-simple-typewriter

## はじめに
今回は、Reactで導入が簡単なタイプライターエフェクトのライブラリを紹介しようと思います。

[React Simple Typewriter](https://www.npmjs.com/package/react-simple-typewriter)です。

## サンプル
さっそく、簡単なデモを作成しましたので確認お願いします。（ちょっとGifなんでカクついてるけどもっと滑らかです。）

![2024-06-21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334980/3c56187b-fceb-13ad-cb66-672e1aaefdbf.gif)

「ある程度、コードをかかないと実装できない」と思っていましたが、結構簡単です。

## サンプルの実装例
### 1. インストール
自身のReact系の環境にライブラリを導入してください。
```bash
npm i react-simple-typewriter
```

### 2. Typewriterの実装
```jsx
import { Typewriter } from 'react-simple-typewriter'

function App() {
  return (
    <>
      <Typewriter
        words={['Better to have tried and failed than never to have tried at all.', 'Actions speak louder than words.', "There's no recipe for life. There isn't.", '']}
        loop={5}
        cursor
        cursorStyle='_'
        typeSpeed={70}
        deleteSpeed={50}
        delaySpeed={1000}
      />
    </>
  )
}
```
`words`プロパティに配列として文字列を配列として登録できる感じです。

デモ実装の紹介は以上になります。簡単！！

## プロパティの紹介

| プロパティ名  | 型      | 必須 | デフォルト値 | 説明                                                                                 |
| ------------- | ------- | ---- | ------------ | ------------------------------------------------------------------------------------ |
| words       | array   | ✅    | -            | タイプライターで表示する単語の配列。                                             |
| loop        | number  | ❌    | 0            | エフェクトのループ回数。0は無限ループ。                                  |
| cursor      | boolean | ❌    | true         | カーソルを表示。                                                         |
| cursorStyle | string  | ❌    | '            |                                                                                     | カーソルのスタイル |
| typeSpeed   | number  | ❌    | 70           | 文字をタイプする速度（ミリ秒）。                                                     |
| deleteSpeed | number  | ❌    | 50           | 文字を削除する速度（ミリ秒）。                                                       |
| delaySpeed  | number  | ❌    | 1500         | 単語が完全に表示された後、次の単語へ移るまでの遅延時間（ミリ秒）。                   |
| delayStart  | number  | ❌    | 500          | タイピングを開始するまでの遅延時間（ミリ秒）。                                       |
| delayDelete | number  | ❌    | 1000         | タイピングが完了してから削除を開始するまでの遅延時間（ミリ秒）。                     |
| pauseTime   | number  | ❌    | 1000         | 単語の削除が完了した後、次のタイピングサイクルが始まるまでの一時停止時間（ミリ秒）。 |
| className   | string  | ❌    | ''           | CSSクラス名。                                                |
| style       | object  | ❌    | {}           | インラインスタイル。                                 |
| onLoopDone  | func    | ❌    | () => {}     | ループが完了したときに実行されるコールバック関数。                                   |
| onType      | func    | ❌    | () => {}     | タイプするたびに実行されるコールバック関数。                                         |


## 公式StoryBook
公式がStoryBookでオプション項目を試せる環境を用意してくれています。
ぜひのぞいてみてください。

https://react-simple-typewriter.vercel.app/?path=/story/examples-typewriter--example&args=cursor:false