lottie animation view for React
npm install @amelix/react-lottie
npm install --save react-lottie
`
Usage
Import pinjump.json.json as animation data
`jsx
import React from 'react'
import Lottie from 'react-lottie';
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
width={400}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}/>
}
}
`
$3
The 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:'),
},
]
``