皆さんこんにちは！
記事内容はReactで簡単に動く背景のアニメーションを実装できるプラグインのreact-particles-jsです。
前回の私のReactオススメツール・モジュールなどで紹介した記事にReact-particles-jsを載せました。
色々と注意点を書き忘れた為、別で記事にしました。
react-particles-jsはGIF画を見て分かる通り、Reactでも動く背景を実装できるんですがnpmの公式では現在は非推奨となっております。
ですが私は非推奨なのは確認済みで、もちろん分かっておりました。
それはローカルではエラーなくしっかり表示されていたので紹介致しました。
このreact-particles-jsで背景を実装しbuildして本番環境に実装してみた所
私の環境では表示される事はありませんでした。
非推奨なのでもしや、かと思ったんですがやはりそうでした
particles効果はなく、キャンバスのみがレンダリングされる今回確認したのはReactなので、他での導入は分かりません。
ですがnpm startでローカルで見ると、しっかり表示はされます。
海外のサイトを歩きまわりました
するとやはり私と同じ現象の方が沢山いたので
非推奨で本番環境で使用した場合のご説明します。
海外のとある内容によりますと
それはバグによるものです、何かしらの理由で機能しなくなり、例え本番環境で表示されたとしてもあなたのサイトが破壊される恐れがあるので本番環境ではオススメしません。
なぜこれが起こっているのかは分かりません。
現在Particles.jsには280の未解決の問題があります
言ってしまえば放棄されたプロジェクトです。
エンジニアの方々は独自で解決を試みながら手探り状態でやっています。
色々と私なりに表示してみようと、react-particles-jsのバージョンをダウングレードしピア依存性としてReact16を必要とするので、
React17からv16.8.4までダウングレードと色々試したりしたんですが思うようにいきませんでした。
『react-particles-js』バージョン3.4.1で表示されたと報告も見かけました
表示される方はされるみたいです。
ですが、私のように表示されずバグでサイトそのものがダメになったらいけないので、実装予定の方は自己責任でお願いします。
ちなみにbuildした後のサイトを検証し確認した所エラーはありませんでした。
背景なしのキャンバスだけが幅をとる
導入した後CSSで位置修正すればローカルでの表示は確認できました。
#particle-canvas {
position:fixed !important;
left:0;
top:0;
width:100%;
height:100%;
}
particlesの背景にテキストを重ねる場合はz-indexを使うしかありません。
<div className="wrapper">
<Particles />
<div className="text">
<h1>This is a test</h1>
</div>
</div>.wrapper {
position: relative;
}
.text{
background-color: black;
color: black;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
z-index: 1;
}
後は直接particlesに重要な小道具であるwidth•heightをかける事もできます。
本番環境で実装できてる方もいるので、私からは
なんとも言えませんが
時間に余裕がある方はぜひ、ローカルで遊んでみて、
ほかにはreact-tsparticlesがあります依存関係がないライブラリになります。
これはreact-particles-jsの互換性があり、つまりparticles.jsをTypeScriptライブラリとして変換します！公式はこちらを推奨してます
試してみて下さい。
以上修正点でした！！。
