immediate-mode canvas rendering with react

_doc.md

live example: https://jsfiddle.net/pdb7kraL/

canvas.js

const CanvasComponent = React.createClass({
  propTypes: {
    render: React.PropTypes.func.isRequired,
  },
  
  componentDidMount() {
    this._canvas = ReactDOM.findDOMNode(this);
    this._ctx = this._canvas.getContext('2d');
    this.renderCanvas();
  },
  
  componentDidUpdate() {
    this.renderCanvas();
  },
  
  renderCanvas() {
    this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
    this.props.render(this._ctx, this.props);
  },

  render() {
    return <canvas />;
  },
});

// Usage
function renderCanvas(ctx, {time}) {
  ctx.font = "12px sans-serif";
  ctx.fillText("Hello from <canvas />!", 10, 20);
  ctx.fillText("The time is:", 10, 50);
  ctx.fillText(time, 10, 65);
}

const App = React.createClass({
  componentDidMount() {
    const runLoop = () => {
      this.forceUpdate();
      window.requestAnimationFrame(runLoop);
    };
    
    window.requestAnimationFrame(runLoop);
  },
  
  render() {
    const time = new Date();
    
    return (
      <CanvasComponent render={renderCanvas} time={time} />
    );
  }
})

ReactDOM.render(<App />, document.getElementById('container'));