Detect element resizing from y

A simple React Higher-Order Component who handle element resize detection from your React Components.

npm install react-element-onresize --save-dev Browser Support With ResizeObserver Polyfill

NOTE: Internet Explorer 8 and its earlier versions are not supported.

import React, { Component } from 'react'; import ElementResize from 'react-element-onresize'; @ElementResize() class App extends Component { constructor(props){ super(props); } render(){ const { elemResize } = this.props; return ( <div> <p>width: {(elemResize.contentRect)? Math.floor(elemResize.contentRect.width) : 0} px</p> <p>height: {(elemResize.contentRect)? Math.floor(elemResize.contentRect.height) : 0} px</p> </div> ) } } export default App; ES6 syntax

import React, { Component } from 'react'; import ElementResize from 'react-element-onresize'; class App extends Component { constructor(props){ super(props); } render(){ const { elemResize } = this.props; return ( <div> <p>width: {(elemResize.contentRect)? Math.floor(elemResize.contentRect.width) : 0} px</p> <p>height: {(elemResize.contentRect)? Math.floor(elemResize.contentRect.height) : 0} px</p> </div> ) } } export default ElementResize()(App); Polyfill usage

import React, { Component } from 'react'; import ElementResize from 'react-element-onresize'; import resizeObserver from "resize-observer-polyfill"; @ElementResize(resizeObserver) class App extends Component { constructor(props){ super(props); } render(){ const { elemResize } = this.props; return ( <div> <p>width: {(elemResize.contentRect)? Math.floor(elemResize.contentRect.width) : 0} px</p> <p>height: {(elemResize.contentRect)? Math.floor(elemResize.contentRect.height) : 0} px</p> </div> ) } } export default App;