LottieFiles / lottie-react

lottie web player as a react component
https://lottiefiles.com
MIT License
720 stars 80 forks source link

Support to provide animationData ? #69

Closed anirudhnykaa closed 2 years ago

anirudhnykaa commented 2 years ago

Overview

...

Motivation

What inspired this enhancement? What makes you think this should be included?

...

Labels

samuelOsborne commented 2 years ago

Hi @anirudhnykaa you can currently get the animationData like this:

import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { lottie: null }; // initialize your state
  }

  render() {
    return (
      <Player
        lottieRef={instance => {
          this.setState({ lottie: instance }); // the lottie instance is returned in the argument of this prop. set it to your local state
        }}
        autoplay={false}
        loop={true}
        controls={true}
        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
        style={{ height: '300px', width: '300px' }}
      ></Player>
    );
  }
}

export default App;

Readme link: https://github.com/LottieFiles/lottie-react#get-lottie-instance