Lottie web for React

Blog : https://medium.com/@tanisha_verma/lottie-and-react-hooks-1adb4713446b

Lottie-web-react is a wrapper for lottie-web using React hooks. For more information on lottie-web visit https://github.com/airbnb/lottie-web

Demo : https://tanisha-verma.github.io/lottie-web-react/

Installation

Install through npm:

npm install --save lottie-web-react

Usage

import  React, { useState } from  'react'
import  Lottie  from  'lottie-web-react'
let  watchAnimationData = require('./stopwatch.json')
const  renderer ='svg'
const  rendererSettings = {
preserveAspectRatio:  'xMinYMin slice',
}

function  MyAnimation() {
const [playingState, setPlayingState] = useState('play')
const [autoplay, setAutoplay] = useState(false)
const [loop, setLoop] = useState(true)
const [path, setPath] = useState('https://assets2.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json')
const [animationData, setAnimationData] = useState(watchAnimationData)
const [speed, setSpeed] = useState(1)
const [direction, setDirection] = useState(1)
return (
<Lottie
options={{
renderer:  renderer,
loop:  loop,
autoplay:  autoplay,
path:  path,
animationData:  animationData,
rendererSettings:  rendererSettings
}}
playingState={playingState}
speed={speed}
direction={direction}
/>
)
}
export  default  MyAnimation

Props

options

Used for loading the animation

• animationData: an Object with the exported animation data.
• path: the relative path to the animation object. (animationData and path are mutually exclusive)
• loop: true / false / number
• autoplay: true / false it will start playing as soon as it is ready
• name: animation name for future reference
• renderer: 'svg' / 'canvas' / 'html' to set the renderer

Note : If path and animationData both are passed then the animation instance is created using path and not animationData.

playingState :

Accepts three values : 'play' , 'pause' or 'stop' . 'play' : Plays lottie animation once the animation is loaded by using lottie-web's play() method. 'pause' : Plays lottie animation once the animation is loaded. Uses lottie-web's pause() method. 'stop' : Stops lottie animation if the animation is loaded by using lottie-web's stop() method.

id

Optional.

className

Pass custom class to modify the container.

direction

Accepts two values : '1' or '-1' . Uses lottie-web's setDirection() method. 1 is forward, -1 is reverse.

speed

Accepts number. Uses lottie-web's setSpeed() method. 1 is normal speed.

goToAndPlay

Type : object. Should contain following parameters :

• value: numeric value.
• isFrame: defines if first argument is a time based value or a frame based (default false).

Uses lottie-web's goToAndPlay() method.

playSegments

Type : object. Should contain following parameters :

• segments: array. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
• forceFlag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately.(default false).

Uses lottie-web's playSegments() method.

eventListeners

Type : array. You can pass list of events and its callbacks to dispatch any action once the event is triggered.

Example use case: [{ eventName: 'loopComplete', callback: () => { setLoopCounter(loopCounter + 1) } }]

Once a loop is completed by animation the event 'loopComplete' is triggered and it calls setLoopCounter action to increment the loopCounter.

Following events can be added:

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready (when initial config is done)
• data_ready (when all parts of the animation have been loaded)
• data_failed (when part of the animation can not be loaded)
• loaded_images (when all image loads have either succeeded or errored)
• DOMLoaded (when elements have been added to the DOM)
• destroy