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:

yarn add @rafaelns/react-lottie

or

npm i --save @rafaelns/react-lottie

Usage

LottieView can be used in a declarative way:

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

export const BasicExample = () => {
  return <Lottie source={animation} autoPlay loop />;
}

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

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<AnimationItem>()
  
  useEffect(() {
    animationRef.current.play();
    // Or set a specific startFrame and endFrame with:
    animationRef.current.play(30, 120);
  }, [])

  return (
    <Lottie
      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.