Miss any of our Open RFC calls?Watch the recordings here! »

react-resize-watcher

0.1.1 • Public • Published

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

Contents

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"
    />
  );
};

API

ResizeWatcherElement

Observe an element for changes to its size

Props

onResize: (e: ResizeObserverEntry) => any

onResize function that will be invoked with ResizeObserverEntry.

resizeWatcher (nodeOrSelector, onResize) => unobserve()

Accepts two parameters

nodeOrSelector: Element | string and onResize: Function

nodeOrSelector: a selector or DOM element to observe.

onResize function that will be invoked with ResizeObserverEntry.

resizeWatcher.unobserve() => ResizeObserver.unobserve(node)

resizeWatcher returns the unobserve() method that ends the observing of the specified node.

Browser support

React Resize Watcher is dependent on the ResizeObserver API and WeakMap:

Resize Observer API

Browser support | Polyfill

WeakMap

Browser support | Polyfill

Install

npm i react-resize-watcher

DownloadsWeekly Downloads

88

Version

0.1.1

License

MIT

Unpacked Size

34.7 kB

Total Files

27

Last publish

Collaborators

  • avatar