Fully declarative React Lottie player

Jul 31, 2020
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 fishing_pole_and_fish for more readable code, an easy to use, seamless and fully declarative control of the lottie player.

View Demo Download Source


npm install --save react-lottie-player


import React, { Component } from 'react' import Lottie from 'react-lottie-player' import lottieJson from './my-lottie.json' class Example extends Component { render() { return ( <Lottie loop animationData={lottieJson} play style={{ width: 150, height: 150 }} /> ) } }