reacttips

react-particles.js から react-tsparticles に更新

imatomix
2021年11月21日 10:52

概要

react-particles.js が deprecated になって react-tsparticles を使用するようにとのことです。僕は VIVITA JAPAN のサイトで react-particles.js + tsparticles を使用していたので、 今回react-tsparticles に切り替えます。

インストール

$ npm install react-tsparticles
古いほうはアンインストールした
$ npm uninstall react-particles tsparticles

設置

これまでと同様のコードでも表示はされたが、デフォルトの設定でいくつか変更点があったため、パーティクルの動きや表示範囲に差異が生まれていた。
import Particles from "react-tsparticles";

//中略

return (
  <Particles
    options={{
      particles: {
        number: {
          value: 8,
        },
        shape: {
          type: 'circle',
        }
      }
    }}
  />
)

変わっていたところ

パラメータ

  • id を変更可能に。何も入力しなければこれまで通りtsparticlesがidになる。
  • init 時と loaded 時に処理を追加できる
  • カスタムシェイプやプリセットを追加できる
import Particles from "react-tsparticles";

const App = () => {
  const particlesInit = (main) => {
    console.log(main);
  }

  const particlesLoaded = (container) => {
    console.log(container);
  }

  return (
    <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} />
  )
}
  • params が options に命名変更
  • params のままでも問題なく動作はした。
  • デフォルト値が変更
  • いくつかのパラメータでデフォルト値が変更していた。これによりパーティクルの動きが変わってしまっていた。
  • 例えば move > enable のデフォルト値が true から false になっていた。

スタイル

  • canvas にデフォルトで適用さられるスタイルが以下のように変更されている。
  • 僕の場合、 position: fixed; が原因で意図しない表示になっていたので、スタイルを上書きした。
image