【React】タイピングアニメーションのreact-typicalをReactv17, v18以上で使いたいとき

2023年10月18日React

Reactで簡単にタイピングアニメーションを実装できるreact-typicalの使い方を紹介します。
reactのバージョンが15か16しか対応していませんが、v17, v18以上で使う方法はあるので合わせて紹介します。

タイピングアニメーションのreact-typicalをReact v17, v18以上で使う方法

まず、公式のnpmコマンドでインストールできないか試します。

npm install --save react-typical

インストールが完了すれば問題なしです。
ただ、

npm ERR! ERESOLVE unable to resolve dependency tree

といったメッセージが出現した場合、インストールできていません。
なので、強制的にインストールする方法があります。

npm install react-typical --force

こちらのコマンドでインストールできるはずです。

インポートして使用

import React from "react";
import Typical from "react-typical";

export default function Sample() {
  return (
         <h1>
          <Typical
              loop={Infinity}
              steps={[
                "文章1文章1文章1文章1",
                  1000,
                  "文章2文章2文章2文章2",
                  1000,
                  "文章3文章3文章3文章3",
                  1000,
                ]}
              />
           </h1>
  );
}

あとは、react-typicalをインポートします。
loopをしたい場合は、loop属性にInfinityをセットします。
stepsの中に配列を用意して、あとはタイピングして表示したい文章をいれていくだけです。