import React, { Component } from "react";
import ReactDOM from "react-dom";
import AnimateCanvas from "jw-animate-canvas";
 
class Example extends Component {
  constructor(props) {
    super(props);
 
    this.resizeHandler = this.resizeHandler.bind(this);
    this.animate = this.animate.bind(this);
  }
 
  componentDidMount() {
    const canvas = this.myCanvas;
    const { animator } = canvas;
    /** Start the animation. */
    animator.start();
 
    /** Pause the animation. */
    animator.pause();
 
    /** Resume the animation. */
    animator.resume();
  }
 
  resizeHandler(width, height) {
    /** ... **/
  }
 
  animate(context, width, height, timeDiff) {
    /** ... **/
  }
 
  render() {
    return (
      <AnimateCanvas
        ref={myCanvas => (this.myCanvas = myCanvas)}
        onResize={this.resizeHandler}
        animate={this.animate}
      />
    );
  }
}
 
ReactDOM.render(<Example />, document.getElementById("root"));