はじめに

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

React Simple Typewriterです。

サンプル

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

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

サンプルの実装例

1. インストール

自身のReact系の環境にライブラリを導入してください。

npm i react-simple-typewriter

2. Typewriterの実装

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でオプション項目を試せる環境を用意してくれています。
ぜひのぞいてみてください。