react-lottie-player
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.1 • Public • Published

    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 simple 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 modern hooks 🎣 for more readable code, an easy to use, seamless and fully declarative control of the lottie player.

    Does not leak memory like lottie-web if you use repeaters.

    Tests NPM JavaScript Style Guide

    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

    Open live example

    View example code

    Lazy loading example

    const MyComponent = () => {
      const [animationData, setAnimationData] = useState();
    
      useEffect(() => {
        import('./animation.json').then(setAnimationData);
      }, []);
    
      if (!animationData) return <div>Loading...</div>;
      return <Lottie animationData={animationData} />;
    }

    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.

    See also #11

    Lottie animation track scrolling div

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

    API

    See https://github.com/airbnb/lottie-web

    View PropTypes

    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!

    Keywords

    none

    Install

    npm i react-lottie-player

    DownloadsWeekly Downloads

    25,934

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    559 kB

    Total Files

    15

    Last publish

    Collaborators

    • mifi