React/Typescript wrapper for awesome Airbnb's [lottie-web](https://github.com/airbnb/lottie-web) lib.
npm install @alfonmga/react-lottie-light-tsReact/Typescript wrapper for awesome Airbnb's lottie-web lib.
you can find demo files in ./examples folder -- launch with yarn start
yarn add @crello/react-lottie or npm install --save @crello/react-lottietypescript
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: 1],
style?: styles passed to lottie container,
direction?: AnimationDirection - [default: 1],
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:
, ReactLottieConfig, ReactLottieOwnProps, ReactLottiePlayingState itself: AnimationDirection, AnimationSegment, AnimationEventName, AnimationEventCallback, AnimationItem, BaseRendererConfig, SVGRendererConfig, CanvasRendererConfig, HTMLRendererConfig, AnimationConfig, AnimationConfigWithPath, AnimationConfigWithData, Lottie`More lottie animations you can find on lottiefiles
License
MIT