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

SizeInfo

ResizeObserver.Collection

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.