Skip to content

Instantly share code, notes, and snippets.

@danny-andrews

danny-andrews/index.html

Last active Oct 5, 2017
Embed
What would you like to do?
Render Callback Example
<div id="root"></div>
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'));
<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>
.mouse {
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment