Events

Enumerates the Lottie React events that you can use to capture playback status.
Use the addEventListener calls to listen to the following exposed events.
Name
Description
load
Animation data is loaded.
instanceLoaded
Animation instance has been saved to state inside the react-player. Use this event to call playerRef.current.play(), playerRef.current.pause() etc..
error
An animation source cannot be parsed, fails to load or has format errors.
ready
Animation data is loaded and player is ready.
play
Animation starts playing.
pause
Animation is paused.
stop
Animation is stopped.
freeze
Animation is paused due to player being invisible.
loop
An animation loop is completed.
complete
Animation is complete (all loops completed).
frame
A new frame is entered.
As an example, the following code demonstrates how to capture the load event and play the animation:
class App extends React.Component {
constructor(props) {
super(props);
this.player = React.createRef();
}
doSomething() {
this.player.current.play(); // make use of the player and call methods
}
render() {
return (
<Player
onEvent={event => {
if (event === 'load') this.doSomething(); // check event type and do something
}}
ref={this.player}
autoplay={false}
loop={true}
controls={true}
src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
style={{ height: '300px', width: '300px' }}
></Player>
);
}
}
export default App;