react-lottie-hooks npmパッケージ

DotLottie(Lottieアニメーションの軽量フォーマット)をスクロール位置に合わせて再生するには、GSAP ScrollTriggerとの連携、アニメーションインスタンスの管理、サーバーレンダリング環境への対応をプロジェクトごとに繰り返すことになります。この繰り返し作業をuseLottieScrollTriggerというフック1つにまとめ、npmパッケージ @jurneyx2/react-lottie-hooks として公開しました。

Next.jsのようなサーバーレンダリング環境でも安全に動作し、TypeScriptの型を提供します。デバッグメッセージは韓国語と英語に対応し、Next.js・Vite・Remix・React Routerの4つの環境の例も同梱しています。MITライセンスで公開しました。