@rafaelns/react-lottie NPM

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

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`