Accessing common functions/data from React components - asp.net-mvc

Question

I'm new to React and want to understand the right way to handle the following scenario.
Say, I have three React components which are essentially siblings i.e. not nested within each other.
All three components need to know the screen resolution of the user and this resolution may change. For example, the user may set the browser window to a smaller size. Essentially, the view port is in a dynamic state.
I don't want to put the view port detection logic into each component which would produce repetitive code. How do I create a common function that is responsible for view port detection and pass this information to each component?
In the following code sample, I have three components that work independently of each other but they'll all need view port information. What's the right way to handle this?
<div id="navigationHere"></div>
<div id="doSomethingHere"></div>
<div id="handleSomethingElseHere"></div>
<script src="nav.jsx" type="text/jsx"></script>
<script src="doSomething.jsx" type="text/jsx"></script>
<script src="handleSomethingElse.jsx" type="text/jsx"></script>
By the way, I'm using this inside an ASP.NET MVC application and thinking about using ReactJs.Net to handle initial state and pre-rendering on the server side. So, it's important for me to understand the right way to handle this within the context of an ASP.NET MVC application.

Answer 1

This is a good use case for what are known as a higher order components.
First off we define a parent component that keeps track of the screen resolution.
var ViewportManager = React.createClass({
getInitialState: function() {
return this.measureViewport();
},
componentWillMount: function() {
window.addEventListener('resize', this.onResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.onResize);
},
onResize: function() {
this.setState(this.measureViewport());
},
measureViewport: function() {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
});
Once this component is mounted it will keep track of the size of the screen, updating each time the browser window is resized. What we need to do now is pass these values down to any components rendered inside of this one.
<ViewportManager>
<NavigationHere />
<DoSomethingHere />
<HandleSomethingElseHere />
</Viewport>
We'll pass down viewportHeight and viewportHidth to each of the inner components.
var ViewportManager = React.createClass({
// ...
render: function() {
var viewportWidth = this.state.width;
var viewportHeight = this.state.height;
var children = this.props.children;
var additionalProps = {
viewportWidth: viewportWidth,
viewportHeight: viewportHeight
};
var modifiedChildren = React.Children.map(children, function(child) {
return React.cloneElement(child, additionalProps);
});
return (
<div className='viewport-manager'>
{{ modifiedChildren }}
</div>
);
}
});
Now all of the components directly inside your ViewportManager will receive two additional props.
var NavigationHere = React.createClass({
render: function() {
// I can see this.props.viewportWidth
// and this.props.viewportHeight
}
});