React-resize-watcher NPM

React Resize Watcher

React Resize Watcher provides a simple interface to the Resize Observer API.

It provides two ways to handle element resizes: ResizeWatcherElement and resizeWatcher.

ResizeWatcherElement adds its direct DOM child as the observed element.
resizeWatcher enables you to specify a target reference to be observed

Highlights

Unopinionated and provides the full ResizeObserverEntry
SSR ready
Does not interfere with refs
Does not use ReactDOM.findDOMNode
Uses a single ResizeObserver to observe multiple elements

Install

npm i react-resize-watcher
# or
yarn add react-resize-watcher

Usage

1. Use in render method

Wrapping a component with ResizeWatcherElement will subscribe its first child DOM element to a Resize Observer. Upon element resize the onResize handler will fire.

const log = ({ contentRect, target }) => console.log({ contentRect, target });

const Demo = () => (
  <ResizeWatcherElement onResize={log}>
    <div
      style={{
        width: '100%',
        height: '300px'
      }}
    />
  </ResizeWatcherElement>
);

2. Use statically

We can observe any element in a function, if required.

const log = ({ contentRect, target }) => console.log({ contentRect, target });

const Demo = () => {
  React.useEffect(() => {
    // can observe a rendered element
    // resizeWatcher returns the unobserve function already referenced to the node
    const observedElement = resizeWatcher('.container', log);

    // or you can observe the document.body
    const bodyElement = resizeWatcher('body', log);

    // unobserve element on unmount
    return () => {
      observedElement.unobserve();
      bodyElement.unobserve();
    }
  });

  return (
    <div
      style={{ width: '100%', height: '300px', background: 'red' }}
      className="container"
    />
  );
};