Skip to content

mifi/react-lottie-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
Mar 13, 2024
Mar 13, 2024
Mar 13, 2024
Jul 12, 2020
Dec 18, 2022
Mar 13, 2024
Jan 14, 2024
Jul 12, 2020
Jan 14, 2024
Jul 12, 2020
Jan 26, 2024
Mar 13, 2024
Jul 12, 2020
Mar 13, 2024
Mar 13, 2024

Repository files navigation

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.

Tests NPM JavaScript Style Guide

Features

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

Screenshot

πŸŽ› 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

License

MIT Β© mifi


Made with ❀️ in πŸ‡³πŸ‡΄

More apps by mifi.no

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