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.

Install

npm install --save react-lottie-player

yarn add react-lottie-player

Usage

import React from 'react'
import Lottie from 'react-lottie-player'

import lottieJson from './my-lottie.json'

export default function Example() {
 return (
 <Lottie
		loop={true}
    speed={2}
    play={true}
		goTo={true}
    animationData={lottieJson}
    direction={1}
    segments={true && [0, 70]}
    style={{ width: 150, height: 150, marginBottom: 10, alignSelf: 'center' }}
    onComplete={() => addLog('complete')}
    onLoopComplete={() => addLog('loopComplete')}
    onEnterFrame={() => { /* addLog('enterFrame') */ }}
    onSegmentStart={() => addLog('segmentStart')}
 />
 )
}

Precisa adicionar a tipagem manualmente em um arquivo .d.ts

declare module 'react-lottie-player'

Example:

Open live example

View example code

Lottie Prop Types

Lottie.propTypes = {
  // You can use either animationData OR path
  animationData: PropTypes.object,
  path: PropTypes.string,

  play: PropTypes.bool,
  goTo: PropTypes.number,
  speed: PropTypes.number,
  direction: PropTypes.number,
  loop: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),

  segments: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.bool]),

  rendererSettings: PropTypes.object,

  renderer: PropTypes.string,

  audioFactory: PropTypes.func,

  onComplete: PropTypes.func,
  onLoopComplete: PropTypes.func,
  onEnterFrame: PropTypes.func,
  onSegmentStart: PropTypes.func,
};

Lazy loading example