node package manager

size-report

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'));