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.

Features

• 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)

Install

npm install --save react-lottie-player

Usage

import 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 }}
    />
  )
}

Example

🎛 Live demo

👩🏿‍💻 Example code

Lazy loading

Option 1: React code splitting (React.lazy)

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 />;
}

Option 2: dynamic import with state

const Example = () => {
  const [animationData, setAnimationData] = useState<object>();

  useEffect(() => {
    import('./animation.json').then(setAnimationData);
  }, []);

  if (!animationData) return <div>Loading...</div>;
  return <Lottie animationData={animationData} />;
}

Option 3: path URL

const Example = () => <Lottie path="https://example.com/lottie.json" />;

Imperative API (ref)

const lottieRef = useRef();

useEffect(() => {
  console.log(lottieRef.current.currentFrame);
}, [])

return <Lottie ref={lottieRef} />;

See also #11

LottiePlayerLight

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.

Lottie animation track scrolling div

See example/App.jsx (ScrollTest) in live example.

Resize mode: cover

If you want the animation to fill the whole container, you can pass this prop. See also #55:

<Lottie rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }} />

API

See type definitions and lottie-web.

Releasing

• Commit & wait for CI tests
• np

Credits

• https://lottiefiles.com/26514-check-success-animation
• https://lottiefiles.com/38726-stagger-rainbow
• Published with create-react-library 😎

License

MIT © mifi

---

Made with ❤️ in 🇳🇴

More apps by mifi.no

Follow me on GitHub, YouTube, IG, Twitter for more awesome content!