2025.06 — 07
react-lottie-hooks npm 패키지
스크롤 위치에 맞춰 DotLottie 애니메이션을 재생하는 React 훅 라이브러리입니다. GSAP ScrollTrigger 연동과 서버 렌더링 안전 처리를 훅 하나로 묶어 npm에 공개했습니다.
v1.2.7
npm 배포 버전
4종
프레임워크 예제 (Next.js · Vite · Remix · React Router)
훅 1개
GSAP 연동 · SSR 처리 · 인스턴스 관리
라이브러리
DotLottie(로티 애니메이션의 경량 포맷)를 스크롤 위치에 맞춰 재생하려면 GSAP ScrollTrigger 연동, 애니메이션 인스턴스 관리, 서버 렌더링 환경 처리를 프로젝트마다 반복하게 됩니다. 이 반복 작업을 useLottieScrollTrigger 훅 하나로 묶어 npm 패키지 @jurneyx2/react-lottie-hooks로 공개했습니다.
특징
Next.js 같은 서버 렌더링 환경에서도 안전하게 동작하고, TypeScript 타입을 제공합니다. 디버그 메시지는 한국어와 영어로 제공하며, Next.js·Vite·Remix·React Router 네 가지 환경의 예제를 함께 담았습니다. MIT 라이선스로 공개했습니다.
Stack
React·TypeScript·GSAP·dotLottie
Links