React component width decorator.

ComponentWidth.js

import React from "react";
import elementResizeEvent from "element-resize-event";

export default (Component) => {
  class ComponentWidth extends React.Component {
    state = {
      width: 0,
    };
    componentDidMount() {
      const element = this.targetElement;
      const self = this;
      if (element) {
        self.updateComponentWidth(element.offsetWidth);
        elementResizeEvent(element, () => {
          self.updateComponentWidth(element.offsetWidth);
        });
      }
    }
    updateComponentWidth(width) {
      this.setState({ width });
    }
    render() {
      return (
        <div
          class="element-resize-event-detector"
          ref={(element) => {
            this.targetElement = element;
          }}
        >
          {this.state.width || this.props.width ? (
            <Component width={this.state.width} {...this.props} />
          ) : null }
        </div>
      );
    }
  }
  return ComponentWidth;
};