react-resize-reporter

Lightweight React Component that reports width and height changes when its parent resizes.

Install

npm install react-resize-reporter

yarn add react-resize-reporter

Usage

// <object> onresize event based implementation
import ResizeReporter from 'react-resize-reporter'
// or
// import { ResizeReporter } from 'react-resize-reporter/object'
// or the scroll event based implementation
// import { ResizeReporter } from 'react-resize-reporter/scroll'
 
function App() {
  return (
    <div style={{ position: 'relative' }}>
      <ResizeReporter onSizeChanged={console.log} reportInit debounce={1000} />
      <p>other stuff</p>
    </div>
  )
}

Which One Should I Use?

The <object> version is more reliable but the <object> element requires more resources (acceptable normally) and could be slow when size changes rapidly (e.g. animation) even with debounce.

Scroll event version is super lightweight and fast but in rare condition the browser may not be ready to update scroll position which may cause size changing not updating. This generally happens when the target element is frequently inserted and removed from DOM.

Props

All props are optional.

/** Report the init rendered size. Default false.  */
reportInit?: boolean
/** Debounce time in millisecond. Default no debounce. */
debounce?: number
/** Fires when width or height changes. */
onSizeChanged?: (width: number, height: number, rect: DOMRect) => void
/** Fires only when width changes. */
onWidthChanged?: (width: number, rect: DOMRect) => void
/** Fires only when height changes. */
onHeightChanged?: (height: number, rect: DOMRect) => void

The rest of the props are passed to the injected <div> or <object> element.

Limitations

Currently there is no perfect solution for detecting element resizing.

react-resize-detector is based on the fairly new Resize Observer API which requires an imperfect polyfill.
react-resize-aware injects an <object> element and listens to the resize event. Not so happy with its hook-abusing API and buggy implementation.
react-height relies on React lifecycle which may not truly reflect the element size changing (e.g. Animation delay or Image loading delay).

This library comes with two implementations with the same API.

The <object> version is similar to that of react-resize-aware but with cleaner implementation.

The scroll event version injects a <div> which contains two <div> children for detecting expanding and shrinking. Whenever the target resizes, one of the detectors will trigger a scroll event. The algorithm is derived from the scrolling spec which is respected by almost every browser.

This also means it comes with the same limitations as react-resize-aware:

The target element should be able to contain children. Replaced elements like <img> are no no. A workaround is to wrap them in a <div>.
The position CSS property of the target element should not be static so that the detectors (which always have the same size as the target) can use absolute to hide itself.

To trigger a "shrink-to-fit" width calculation for a block element you can apply either float, inline-block, absolutly positioning, flex or other styling methods.

npm