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.
npm install rc-resize-observerVerified import paths — ran on the pinned version, not inferred.
Demonstrates observing a textarea's dimensions and updating state upon resize using the ResizeObserver component.
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`.
Implement debouncing or throttling for your `onResize` handler to limit its execution rate. For example, use a utility function like `lodash.debounce`.
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.
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.
Always provide a valid function to the `onResize` prop. `onResize={() => { /* handle resize */ }}`