with-size higher order function.

with-size.js

import React, { Component } from 'react';
import { debounce } from 'throttle-debounce';

export default function (ComposedComponent) {
  class WithSize extends Component {
    static getDomNodeDimensions(node) {
      const {
        top, right, bottom, left, width, height,
      } = node.getBoundingClientRect();
      return {
        top, right, bottom, left, width, height,
      };
    }

    constructor() {
      super();
      this.debounceUpdate = debounce(100, this.update);
      this.state = {
        width : 0,
      };
    }

    componentDidMount() {
      window.addEventListener('resize', this.debounceUpdate);
      this.update();
    }

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

    update = () => {
      const clientRect = WithSize.getDomNodeDimensions(this.node);
      this.setState({
        ...clientRect,
      });
    }

    render() {
      return (
        <div ref={node => { this.node = node; }} style={{ width : '100%', display : 'block' }}>
          {this.state.width ? <ComposedComponent {...this.state} {...this.props} /> : null}
        </div>
      );
    }
  }
  return WithSize;
}