@zeecoder/react-resize-observer

@zeecoder/react-resize-observer

A React component that allows you to use a ResizeObserver to measure an element's size.

Install

yarn add @zeecoder/react-resize-observer
# or
npm install --save @zeecoder/react-resize-observer

Usage

const App = () => (
  <ResizeObserver>
    {(ref, width, height) => (
      <div ref={ref}>
        My size is {width}x{height}
      </div>
    )}
  </ResizeObserver>
);

Notes

• Uses resize-observer-polyfill internally, which falls back to the native ResizeObserver, if available.

Related

• use-resize-observer
• @zeecoder/container-query

License

MIT

Changelog

2.0.0

• [BREAKING] ResizeObserver now always expects a function as a child, to which it passes in a reference as an argument that can be added to the element to be observed.
• [BREAKING] Returning width and height as the second and third parameters instead of as part of an object
• [BREAKING] Now reports 1x1 size on before the observer is triggered instead of 0x0
• Added tests using Karma