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!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
