React

HTML

<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/gifplayer.css">
<div id="app"></div>

React

class MyGifPlayer extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
      playing: true
    };
  }

  render() {
    return (
      <React.Fragment>
        <GifPlayer
          gif="https://raw.githubusercontent.com/benwiley4000/react-gif-player/master/flip_the_frog.gif"
          still="https://raw.githubusercontent.com/benwiley4000/react-gif-player/master/flip_the_frog.jpg"
          pauseRef={pause => this.pauseGif = pause}
          onTogglePlay={playing => this.setState({ playing })}
          autoplay
        />
        <br/>
        <button
          style={{ fontSize: 30 }}
          disabled={!this.state.playing}
          onClick={() => this.pauseGif()}
        >
          {this.state.playing ? 'Pause GIF' : 'GIF Paused'}
        </button>
      </React.Fragment>
    )
  }
}

ReactDOM.render(<MyGifPlayer />, document.querySelector("#app"))