<div id="app">
  </app>


body {
  background: #333;
  color: white;
}
/*
Example for render prop design pattern
*/

const catSource = "data:image/jpeg;base64,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"

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src={catSource} style={{ position: 'absolute', h:"1", w:"100px", left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>

  
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}


React.render(<MouseTracker />, document.getElementById("app"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js