Lottie for React

 

Lottie component for React

Lottie is a library that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

Installing

Install @rafaelns/react-lottie:

``bash
yarn add @rafaelns/react-lottie
`

or

`bash
npm i --save @rafaelns/react-lottie
`

Usage

LottieView can be used in a declarative way:

`jsx
import React from 'react';
import Lottie from '@rafaelns/react-lottie';
import animation from './animation.json'

export const BasicExample = () => {
return ;
}
`

Additionally, there is an imperative API which is sometimes simpler.

`jsx
import React, { useRef, useEffect } from 'react';
import Lottie, { AnimationItem } from '@rafaelns/react-lottie';
import animation from '../path/to/animation.json'

export const BasicExample = () => {
const animationRef = useRef()

useEffect(() {
animationRef.current.play();
// Or set a specific startFrame and endFrame with:
animationRef.current.play(30, 120);
}, [])

return (
animationRef={animationRef}
source={animation}
/>
);
}
`

API

You can find the full list of methods available in API document.

| Prop | Description | Default |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| source | Mandatory - The source of animation. JS object of an animation. | _None_ |
| style | Style attributes for the view, as expected in a standard View. | The aspectRatio exported by Bodymovin will be set. Also the width if you haven't provided a width or height |
| loop | A boolean flag indicating whether or not the animation should loop. | true |
| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. | false |
| speed | The speed the animation will progress. Sending a negative value will reverse the animation. | 1` |

And any other div props.