@crello/react-lottie

React/Typescript wrapper for awesome Airbnb's lottie-web lib.

Demo

https://crello.github.io/react-lottie/

you can find demo files in ./examples folder -- launch with yarn start

Installation

yarn add @crello/react-lottie or npm install --save @crello/react-lottie

Usage

Most basic react-lottie example:
``

typescript
import React from 'react';
import { Lottie } from '@crello/react-lottie'
import animationData from './myAwesomeAnimation.json'

export const BasicLottieComponent = () =>`

Lottie component creates

and passes it to lottie config as the container param. This div contains renderer's output of choosen type: 'svg'| 'html' | 'canvas'. accepts style and className props that will apply to the container.

Any browser events should be added on elements wrapping actual e.g.:`html


Params
$3

typescript
{
  height?: string - valid css value e.g. '100px' [default:

100%

],
  width?: string - valid css value e.g. '100px' [default:

100%

],
  playingState?: 'playing' | 'stopped' | 'paused' [default:

playing

],
  segments?: AnimationSegment | AnimationSegment[],
  speed?: number - animation playback speed [default:

],
  style?: styles passed to lottie container,
  direction?: AnimationDirection - [default:

],
  lottieEventListeners?: ReactLottieEvent[] - see available events in AnimationEventName from 'lottie-web',
  config: ReactLottieConfig - config with mandatory

path or animationData

,
}

$3

typescript
{
  animationData: any - an Object with the exported animation data,
  path: string - remote data,
  renderer?: 'svg' | 'canvas' | 'html' - choose renderer [default:

svg

],
  loop?: boolean | number - loop boolean or count [default:

false

],
  autoplay?: boolean - it will start playing as soon as it is ready [default:

true

],
  name?: string - animation name for future reference,
  rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig,
}


More

See more details in @crello/react-lottie exports: Lottie, ReactLottieConfig, ReactLottieOwnProps, ReactLottiePlayingState

Also check out the types provided by lottie-web itself: AnimationDirection, AnimationSegment, AnimationEventName, AnimationEventCallback, AnimationItem, BaseRendererConfig, SVGRendererConfig, CanvasRendererConfig, HTMLRendererConfig, AnimationConfig, AnimationConfigWithPath, AnimationConfigWithData, Lottie`

More lottie animations you can find on lottiefiles

License

MIT