Material-UI's styleResizable mixin as a decorator

.babelrc

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-class-properties",
    "transform-function-bind",
    "transform-runtime",
    "transform-object-rest-spread"
  ]
}

deviceSize.js

import React, { Component } from 'react';
import Events from 'material-ui/lib/utils/events';

const Sizes = {
  SMALL: 1,
  MEDIUM: 2,
  LARGE: 3,
};

function deviceSize(ChildComponent) {

  class DeviceSize extends Component {

    state = {
      deviceSize: Sizes.SMALL
    }

    componentDidMount() {
      this.updateDeviceSize();
      this.bindResize();
    }

    componentWillUnmount() {
      this.unbindResize();
    }

    isDeviceSize(desiredSize) {
      return this.state.deviceSize >= desiredSize;
    }

    updateDeviceSize() {
      const width = window.innerWidth;

      if (width >= 992) {
        this.setState({deviceSize: Sizes.LARGE});
      } else if (width >= 768) {
        this.setState({deviceSize: Sizes.MEDIUM});
      } else { // width < 768
        this.setState({deviceSize: Sizes.SMALL});
      }
    }

    bindResize() {
      Events.on(window, 'resize', ::this.updateDeviceSize);
    }

    unbindResize() {
      Events.off(window, 'resize', ::this.updateDeviceSize);
    }

    render() {
      return (
        <ChildComponent
          {...this.props}
          isSmallDevice={this.state.deviceSize === Sizes.SMALL}
          isMediumDevice={this.state.deviceSize === Sizes.MEDIUM}
          isLargeDevice={this.state.deviceSize === Sizes.LARGE}
        />
      );
    }
  }

  return DeviceSize;
}

export default deviceSize;

Master.js

import React, { Component } from 'react';
import deviceSize from './deviceSize';

const styles = {
  content: {
    margin: '48px 72px'
  },
  contentSmall: {
    margin: 24
  },
};

const m = (...s) => Object.assign({}, ...s);

class Master extends Component {

  render() {
    return (
      <div>
        <div style={m(
          styles.content,
          this.props.isSmallDevice && styles.contentSmall
        )}>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default deviceSize(Master);

Original mixin