見出し画像

lottieファイルをreactで表示する際に使用しているライブラリについて

こんにちわ。nap5です。


lottieファイルをreactで表示する際に使用しているライブラリについて紹介したいと思います。


lottieについては以下になります。


新しいバージョンのreact18系で使用する際には、以下のライブラリを使います。


似たようなライブラリに以下がありますが、警告がコンソールに出ているので、僕は使用していません。


https://www.npmjs.com/package/react-lottie


せっかくなので、2つのライブラリを使ったデモを用意しました。コメントアウトするなどをすれば、react-lottieライブラリの方でコンソールに警告ログが出力されていることが確認できると思います。


デモサイトです。


デモコードです


lottie-reactを使っていくのがいいのかなと思います。


最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/


また、コースの内容紹介記事は以下になります。

https://note.com/zak5/n/nfae54a10ae67


簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか?