Fully declarative React Lottie player
Inspired by several existing packages wrapping lottie-web for React, I created this package because I wanted something that just works and is easy to use. None of the alternatives properly handle changes of props like playing/pausing/segments. This lead to lots of hacks to get the animations to play correctly.
react-lottie-player is a complete rewrite using hooks 🎣 for more readable code, easy to use, seamless and fully declarative control of the lottie player.
- Fully declarative
- Handles state changes correctly
- Does not leak memory like lottie-web if you use repeaters
- LottiePlayerLight support (no
eval) - Alternative imperative API using ref (use at your own risk)
npm install --save react-lottie-playerimport React from 'react' import Lottie from 'react-lottie-player' // Alternatively: // import Lottie from 'react-lottie-player/dist/LottiePlayerLight' import lottieJson from './my-lottie.json' export default function Example() { return ( <Lottie loop animationData={lottieJson} play style={{ width: 150, height: 150 }} /> ) }
Extract your Lottie animation into a separate component, then lazy load it:
// MyLottieAnimation.jsx import Lottie from 'react-lottie-player'; import animation from './animation.json'; export default function MyLottieAnimation(props) { return <Lottie animationData={animation} {...props} />; } // MyComponent.jsx import React from 'react'; const MyLottieAnimation = React.lazy(() => import('./MyLottieAnimation')); export default function MyComponent() { return <MyLottieAnimation play />; }const Example = () => { const [animationData, setAnimationData] = useState<object>(); useEffect(() => { import('./animation.json').then(setAnimationData); }, []); if (!animationData) return <div>Loading...</div>; return <Lottie animationData={animationData} />; }const Example = () => <Lottie path="https://example.com/lottie.json" />;const lottieRef = useRef(); useEffect(() => { console.log(lottieRef.current.currentFrame); }, []) return <Lottie ref={lottieRef} />;See also #11
The default lottie player uses eval. If you don't want eval to be used in your code base, you can instead import react-lottie-player/dist/LottiePlayerLight. For more discussion see #39.
See example/App.jsx (ScrollTest) in live example.
If you want the animation to fill the whole container, you can pass this prop. See also #55:
<Lottie rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }} />See type definitions and lottie-web.
- Commit & wait for CI tests
np
- https://lottiefiles.com/26514-check-success-animation
- https://lottiefiles.com/38726-stagger-rainbow
- Published with create-react-library 😎
MIT © mifi
Made with ❤️ in 🇳🇴
Follow me on GitHub, YouTube, IG, Twitter for more awesome content!