React RenderProps Example

RenderPropsExample.js

// Component with renderProps that will add mouse position to the compoent that uses it.
class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mouseX: 0, mouseY: 0 };
  }
  onMouseMove = e => {
    this.setState({ mouseX: e.clientX, mouseY: e.clientY });
  };
  componentDidMount() {
    window.addEventListener('mousemove', this.onMouseMove);
  }
  componentWillUnmount() {
    window.removeEventListener('mousemove', this.onMouseMove);
  }
  render = () => this.props.children(this.state);
}

export default class MyComponent extends React.Component {
  render = () => (
    <Mouse>
      {({ mouseX, mouseY }) => (
        <span>
          Mouse X: {mouseX} Mouse Y: {mouseY}
        </span>
      )}
    </Mouse>
  );
}