react-component/resize-observer

README

@rc-component/resize-observer

_{Part of the Ant Design ecosystem.}

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

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.