lottie animation view for React
npm install react-lottie-light-js
This is a fork, in order to use react-lottie with the lottie-light version.
Install through npm:
``
npm install --save react-lottie-light-js
Import pinjump.json.json as animation data
`jsx
import React from 'react'
import Lottie from 'react-lottie-light-js';
import * as animationData from './pinjump.json'
export default class LottieControl extends React.Component {
constructor(props) {
super(props);
this.state = {isStopped: false, isPaused: false};
}
render() {
const buttonStyle = {
display: 'block',
margin: '10px auto'
};
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return
`
Component supports the following components:options required
the object representing the animation settings that will be instantiated by bodymovin. Currently a subset of the bodymovin options are supported:
>loop options [default:
false]
>
>autoplay options [default: false]
>
>animationData required
>
>rendererSettings required width optional [default:
100%]pixel value for containers width.
height optional [default:
100%]pixel value for containers height.
eventListeners optional [default:
[]]This is an array of objects containing a
eventName and callback function that will be registered as eventlisteners on the animation object. refer to bodymovin#events where the mention using addEventListener, for a list of available custom events.example:
`jsx
eventListeners=[
{
eventName: 'complete',
callback: () => console.log('the animation completed:'),
},
]
``* Bodymovin react-lottie is a wrapper of bodymovin
* Angular Lottie angular implementation
* Vue Lottie vue implementation
* React Native Lottie react native implementation by airbnb
* IOS Lottie ios implementation by airbnb
* Android Lottie android implementation by airbnb