React Resize Observer Component

1.4.3 · renamed · verified Sun Apr 19

rc-resize-observer is a React component that provides a declarative way to observe changes in the dimensions of its child elements, leveraging the browser's native `ResizeObserver` API. This package, currently at its last stable version `1.4.3`, wraps the observer logic, offering a simple `onResize` prop to receive `width` and `height` updates. Active development and new features, including a `useResizeObserver` hook, have since migrated to the successor scoped package, `@rc-component/resize-observer`, which is currently at version `1.1.2`. While `rc-resize-observer` remains functional for existing applications, new projects are strongly encouraged to use the `@rc-component/resize-observer` package for ongoing support and enhancements. It aims to offer efficient, non-blocking size monitoring without polling.

Common errors

```
Error: ResizeObserver loop limit exceeded
```
cause The `onResize` callback is causing synchronous layout changes that immediately trigger another resize event, leading to an infinite loop.

fix Ensure that any state updates or DOM manipulations within `onResize` do not directly cause a resize of the observed element. Debounce or throttle the `onResize` handler to break the synchronous cycle.
```
TypeError: Cannot read properties of undefined (reading 'onResize')
```
cause The `onResize` prop was not provided or was `undefined` when the component tried to access it.

fix Always provide a valid function to the `onResize` prop. `onResize={() => { /* handle resize */ }}`

Warnings

breaking The `rc-resize-observer` package has been superseded. Active development, new features, and bug fixes are now applied to the `@rc-component/resize-observer` package. While `rc-resize-observer` at v1.4.3 remains functional, it will not receive future updates.
Fix: Migrate to `@rc-component/resize-observer`. Install with `npm install @rc-component/resize-observer` and update imports from `rc-resize-observer` to `@rc-component/resize-observer`.
gotcha The `onResize` callback can fire frequently, especially during rapid resizing. If the callback performs complex calculations or state updates, it can lead to performance issues or layout thrashing. This is a common pitfall when working with any resize observer API.
Fix: Implement debouncing or throttling for your `onResize` handler to limit its execution rate. For example, use a utility function like `lodash.debounce`.
gotcha The `ResizeObserver` only triggers when the content rectangle of the observed element changes. Changes to margins, padding, or borders that do not affect the content rectangle will not trigger an observation. Ensure you are observing the correct element or considering the box model implications.
Fix: Understand the CSS Box Model. If you need to observe changes to the border box or margin box, you might need to observe a parent element or use a different approach.

Install

npm install rc-resize-observer npm
yarn add rc-resize-observer yarn
pnpm add rc-resize-observer pnpm

Imports

ResizeObserver
wrong:
```
const ResizeObserver = require('rc-resize-observer');
```
correct:
```
import ResizeObserver from 'rc-resize-observer';
```
This is a default import for the component. CommonJS `require` is generally not recommended in modern React projects using ESM.
ResizeObserverProps
```
import type { ResizeObserverProps } from 'rc-resize-observer';
```
TypeScript type import for the component's props.

Quickstart

Demonstrates observing a textarea's dimensions and updating state upon resize using the ResizeObserver component.

import React from 'react';
import ResizeObserver from 'rc-resize-observer';
import { createRoot } from 'react-dom/client';

const App = () => {
  const [size, setSize] = React.useState({ width: 0, height: 0 });

  return (
    <div style={{ padding: 20, border: '1px solid #ccc' }}>
      <h2>Observe Me!</h2>
      <ResizeObserver
        onResize={({ width, height }) => {
          console.log('resized!', { width, height });
          setSize({ width, height });
        }}
      >
        <textarea
          placeholder="Try resizing this textarea"
          rows={5}
          style={{ width: '100%', minWidth: '100px', maxWidth: '400px', minHeight: '50px' }}
        />
      </ResizeObserver>
      <p>Current size: {size.width}px x {size.height}px</p>
    </div>
  );
};

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

view raw JSON →