// import React from 'react'; import lottie from 'lottie-web'; class MyLottie extends React.Component { componentDidMount() { this.renderLottie() } renderLottie() { const { path } = this.props; if (path) { this.timer = setTimeout(() => { this.lottie = lottie.loadAnimation({ container: document.getElementById('lottie'), //this.lottieRef, // the dom element that will contain the animation renderer: 'svg', loop: true, autoplay: true, path, // the path to the animation json }); }, 300); } } componentWillUnmount() { if (this.lottie) { this.lottie.destroy(); } if (this.timer) { clearTimeout(this.timer); } } closeLottie() { if (this.lottie) { this.lottie.destroy(); } } testLog() { console.log(this.state); } render() { return (
(this.lottieRef = ref)} id="lottie" style={this.props.style || {}} >
); } } export default MyLottie; MyLottie.defaultProps = { path: '' }