MeasureSize.tsx

gistfile1.txt

import * as React from 'react';

export interface MeasureSizeProps {
  onResize?: (size: number[]) => void;
}

export class MeasureSize extends React.Component<MeasureSizeProps, null> {
  componentDidMount() {
    this.dispatchResize();
  }
  componentDidUpdate() {
    this.dispatchResize();
  }
  rootElement: HTMLElement;
  size: number[];
  dispatchResize() {
    if (this.props.onResize) {
      let s = [this.rootElement.offsetWidth, this.rootElement.offsetHeight];
      if (!this.size || this.size[0] !== s[0] || this.size[1] !== s[1]) {
        this.size = s;
        this.props.onResize(s);
      }
    }
  }
  render() {
    return (
      <div className="MeasureSize" ref={element => this.rootElement = element}>
        {this.props.children}
      </div>
    );
  }
}