react-particles-jsからreact-tsparticlesへの変更手順

react-particles-jsライブラリが非推奨となっていたためreact-tsparticlesに変更しました。その方法を簡潔にまとめてみます。

---

react-particles-jsのアンインストール

$ npm uninstall react-particles-js

react-tsparticlesをインストール（バージョン1.43.1）

最新のv2だとなぜか表示されなかったのでv1.43.1を。

$ npm i react-tsparticles@1.43.1

import Particles from 'react-tsparticles'の置換

すべてのimport Particles from 'react-particles-js'をimport Particles from 'react-tsparticles'に置き換えます。

-import Particles from 'react-particles-js'
+import Particles from 'react-tsparticles'

オプション設定の追加

react-tsparticlesではデフォルトでページ全体に適用されてしまうため、コンテナ内のみに適用する場合はパラメーター内に以下のオプション設定を追加します。

tsparticles-config.json

{
# 他のオプション ,
"fullScreen": {
"enable": false
},
# 他のオプション ,
}

おまけ

particleのデモのリンクをいくつかご紹介します。
以下のサイトではさまざまな操作が可能ですが、バージョン1では動作しない場合があるかもしれません。