size-report

React component Code borrowed from a blog post by backalleycoder.com.

Install

npm install react-size-report

Example

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  state = {
    width: 0,
    height: 0,
  }

  handleChange({ width, height }) {
    this.setState({
      width,
      height,
    });
  }

  render() {
    const { width, height } = this.state;
    return (
      <div>
        <p>width: {width}px, height: {height}px</p>
        <SizeReport
          onChange={::this.handleChange}
          style={{
            resize: 'both',
            width: '100px',
            border: '1px solid black',
            overflow: 'scroll',
          }}
        >
          You can resize me!
        </SizeReport>
      </div>
    );
  }
}

render(<App />, document.getElementById('container'));