react-lottie-light-js v1.2.6
React Lottie Light JS Animation View for React
Why Lottie-light-js?
This is a fork, in order to use react-lottie with the lottie-light version.
Installation
Install through npm:
npm install --save react-lottie-light-js
Usage
Import pinjump.json.json as animation data
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 <div>
<Lottie options={defaultOptions}
height={400}
width={400}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}/>
<button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
<button style={buttonStyle} onClick={() => this.setState({isStopped: false})}>play</button>
<button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>pause</button>
</div>
}
}
props
The <Lottie />
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:
eventListeners=[
{
eventName: 'complete',
callback: () => console.log('the animation completed:'),
},
]
Related Projects
- 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
Contribution
Your contributions and suggestions are heartily welcome.
License
MIT