React AspectRatioDiv component, guarantees a div to keep a given ratio (assuming the layout don't change over time, otherwise call syncSize, or do a raf loop to call it)

AspectRatioDiv.js

//@flow
import React, {
  Component,
  PropTypes,
} from "react";

const hasWindow = typeof window !== "undefined";

export default class AspectRatioDiv extends Component {
  state: { width: ?number } = {
    width: null,
  };
  static propTypes = {
    ratio: PropTypes.number,
  };
  static defaultProps = {
    ratio: 1,
  };
  root: ?HTMLElement;
  componentDidMount() {
    if (hasWindow) {
      window.addEventListener("resize", this.onResize, false);
      this.syncSize();
    }
  }
  componentWillUnmount() {
    if (hasWindow) {
      window.removeEventListener("resize", this.onResize, false);
    }
  }
  onResize = () => {
    this.syncSize();
  };
  syncSize () {
    const {root} = this;
    if (!root) return;
    const {width} = root.getBoundingClientRect();
    if (width !== this.state.width) {
      this.setState({ width });
    }
  }
  onRef = (ref: HTMLElement) => {
    this.root = ref;
  };
  render() {
    const { style, ratio, ...props } = this.props;
    const { width } = this.state;
    return <div
      ref={this.onRef}
      {...props}
      style={
        typeof width !== "number"
        ? style
        : { ...style, height: Math.round(width * ratio) }
      }
    />;
  }
}