react-lottie-player

import React, { useEffect, useState, useRef } from 'react'; import Lottie from 'react-lottie-player'; // Alternatively for environments with strict CSPs or SSR, use the 'Light' version: // import Lottie from 'react-lottie-player/dist/LottiePlayerLight'; interface LottieAnimationData { v: string; fr: number; ip: number; op: number; w: number; h: number; nm: string; assets: any[]; layers: any[]; } const LottiePlayerExample: React.FC = () => { const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null); const lottieRef = useRef<any>(null); // Type 'any' for simplicity; typically more specific lottie-web instance type useEffect(() => { // Dynamically import animation data, useful for code splitting large JSON files import('./my-lottie-animation.json') .then(module => setAnimationData(module.default as LottieAnimationData)) .catch(error => console.error('Failed to load Lottie animation:', error)); }, []); if (!animationData) { return <div>Loading Lottie animation...</div>; } return ( <div> <h1>My Lottie Animation</h1> <Lottie loop play animationData={animationData} lottieRef={lottieRef} style={{ width: 300, height: 300, border: '1px solid #eee' }} onEvent={(event: string) => { // console.log(`Lottie Event: ${event}`); if (event === 'complete') { console.log('Animation completed!'); } }} /> <button onClick={() => lottieRef.current?.play()}>Play</button> <button onClick={() => lottieRef.current?.pause()}>Pause</button> <button onClick={() => lottieRef.current?.stop()}>Stop</button> <button onClick={() => lottieRef.current?.setSpeed(lottieRef.current?.getSpeed() * 1.5)}>Speed Up</button> </div> ); }; export default LottiePlayerExample;