@rc-component/resize-observer

_{Part of the Ant Design ecosystem.}

📏 React ResizeObserver wrapper with render-prop and batch collection support.

English | 简体中文

Highlights

• Observes resize changes for a single React child.
• Supports render props when the observed element is not the direct child.
• Batches multiple child resize events with ResizeObserver.Collection.
• Reports both bounding-box and offset sizes.

Install

npm install @rc-component/resize-observer

Usage

import ResizeObserver from '@rc-component/resize-observer';

export default () => (
  <ResizeObserver
    onResize={(size, element) => {
      console.log(size.width, size.height, element);
    }}
  >
    <textarea />
  </ResizeObserver>
);

import ResizeObserver from '@rc-component/resize-observer';

export default () => (
  <ResizeObserver.Collection
    onBatchResize={infoList => {
      console.log(infoList.map(({ data, size }) => [data, size.width]));
    }}
  >
    <ResizeObserver data="left">
      <div>Left</div>
    </ResizeObserver>
    <ResizeObserver data="right">
      <div>Right</div>
    </ResizeObserver>
  </ResizeObserver.Collection>
);

Online preview: https://resize-observer.react-component.vercel.app/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

ResizeObserver

Name	Type	Default	Description
children	ReactNode | (ref: React.RefObject<Element>) => ReactElement	-	Element to observe, or a render function receiving the observer ref.
data	any	-	Extra payload passed to ResizeObserver.Collection callbacks.
disabled	boolean	false	Disable resize observation.
onResize	(size: SizeInfo, element: HTMLElement) => void	-	Triggered when the observed element size changes.

SizeInfo

Name	Type	Description
height	number	Floored bounding-box height.
offsetHeight	number	Element offset height, normalized when it matches the rounded bounding-box height.
offsetWidth	number	Element offset width, normalized when it matches the rounded bounding-box width.
width	number	Floored bounding-box width.

ResizeObserver.Collection

Name	Type	Default	Description
children	ReactNode	-	Observers to collect.
onBatchResize	(resizeInfo: ResizeInfo[]) => void	-	Triggered once per microtask with all collected child resize events.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/resize-observer is released under the MIT license.