Popularity
3.1
Growing
Activity
7.8
Growing
212
6
26

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v1.1.0

react-lottie-player alternatives and similar libraries

Based on the "Framework bindings / integrations" category.
Alternatively, view react-lottie-player alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-lottie-player or a related project?

Add another 'Framework bindings / integrations' Library

README

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

[](screenshot.png)

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!


*Note that all licence references and agreements mentioned in the react-lottie-player README section above are relevant to that project's source code only.