React Component that notifies you whenever it is resized

Usage no npm install needed!

<script type="module">
  import zippytechReactNotifyResize from 'https://cdn.skypack.dev/@zippytech/react-notify-resize';



Get resize notifications on any React element


$ npm install --save @zippytech/react-notify-resize


React Component that notifies you whenever it is resized - by any means.

It can be used as a standalone Component inside the HTML element you want to detect resize on.

Or it can be used as a higher-order function that takes your component and returns a NotifyResize wrapped component.


In order to use @zippytech/react-notify-resize - 3.0.0 you need to have react and prop-types packages installed in your app, since those are peer dependencies for this package. You can use any React version >=15.0.0

NotifyResize component

import React, { Component } from 'react'
import { NotifyResize } from '@zippytech/react-notify-resize'

class MyComponent extends Component {
    return <div style={{position: 'relative'}}>
      <NotifyResize onResize={this.onResize.bind(this)} />

  onResize({ width, height }){
    //you get notified when the component div is resized
    //the only condition is that it has a relative or absolute position
  • onResize({ width, height }): Function
  • notifyOnMount: Boolean - if true, calls the onResize prop on component mount. Defaults to false
  • measureSize: Function - a custom function to measure HTMLElement size, if you want to provide one. It needs to return an object with {width, height}. By default node.offsetWidth and node.offsetHeight are used for measuring element size.
  • shouldComponentUpdate: Function - a custom function to override the default shallowequal implementation. Called with shouldComponentUpdate(nextProps, currentProps, nextState, currentState)

NotifyResize higher-order function

import notifyResize from '@zippytech/react-notify-resize'

class MyComponent extends React.Component {

    // the element you want to listen for resize must have position relative
    return <div style={{position: 'relative'}}>
        // Include this helper inside the element you want to listen for resize

  // will be called on resize if it is defined
  onResize({ width, height }){
    // do something on resize

const MyNotifiedComponent = notifyResize(MyComponent)

class App extends React.Component {
    return <MyNotifiedComponent onResize={/* called when element changes dimension */} ref="notifier"/>

Notice that in this case, both the onResize instance function is called, if it exists, and the onResize prop is called, if it is a function.

You can nest the resizeTool prop wherever you want, as long as its parent has a relative or absolute position.

If you want to get a reference to your actual component, you can access that using .component. In the example above, you can use:

//if you have a reference to the `app` component

Not the most elegant access chain, but you can always use the plain component instead of the higher-order function.