Source: lern-layouts/mixins/Screen.jsx

import React from 'react';

/**
 * Screen - bind on view state heigth and width
 * @class
 * @public
 * @memberof LernLayouts.Mixins
 * @example
 * import { Screen } from 'meteor/duckdodgerbrasl:lern-layouts';
 * ...
 * class SomeView extends React.Component {
 * ...
 *  const { innerWidth, innerHeight } = this.state;
 * ...
 * }
 * ...
 * export default Screen(SomeView);
 * @return {object} this.state.innerHeight and this.state.innerWidth
 */
const Screen = (WrappedCompenent) => class View extends React.Component {

  // Lifecycle

  constructor(props) {
    super(props);
    this.state = {
      innerHeight: window.innerHeight,
      innerWidth: window.innerWidth,
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize.bind(this));
  }

  // handlers

  handleResize(e) {
    this.setState({ innerHeight: window.innerHeight, innerWidth: window.innerWidth });
  }

  render() {
    return <WrappedCompenent {...this.state} />;
  }

};

export default Screen;