Render Callback Example

index.html

<div id="root"></div>

render-callback-example.markdown

Render Callback Example

A Pen by Andrews on CodePen.

License.

script.babel

class WindowWidth extends React.Component {
  constructor(props) {
    super(props);
    this.state = { width: 0 };
  }

  componentDidMount() {
    this.setState({ width: window.innerWidth });
    window.addEventListener(
      'resize',
      ({ target }) => {
        this.setState({ width: target.innerWidth });
      }
    );
  }

  render() {
    const { width } = this.state;
    return this.props.children(width);
  }
}

const App = () => (
  <WindowWidth>
    {width => <div>Window is {width}</div>}
  </WindowWidth>
);

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://unpkg.com/reselect@3.0.1/dist/reselect.js"></script>

style.css

.mouse {
  height: 100vh;
}