{"id":14863,"library":"rc-resize-observer","title":"React Resize Observer Component","description":"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.","status":"renamed","version":"1.4.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/resize-observer","tags":["javascript","react","react-component","react-resize-observer","resize-observer","typescript"],"install":[{"cmd":"npm install rc-resize-observer","lang":"bash","label":"npm"},{"cmd":"yarn add rc-resize-observer","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-resize-observer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component functionality.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"This is a default import for the component. CommonJS `require` is generally not recommended in modern React projects using ESM.","wrong":"const ResizeObserver = require('rc-resize-observer');","symbol":"ResizeObserver","correct":"import ResizeObserver from 'rc-resize-observer';"},{"note":"TypeScript type import for the component's props.","symbol":"ResizeObserverProps","correct":"import type { ResizeObserverProps } from 'rc-resize-observer';"}],"quickstart":{"code":"import React from 'react';\nimport ResizeObserver from 'rc-resize-observer';\nimport { createRoot } from 'react-dom/client';\n\nconst App = () => {\n  const [size, setSize] = React.useState({ width: 0, height: 0 });\n\n  return (\n    <div style={{ padding: 20, border: '1px solid #ccc' }}>\n      <h2>Observe Me!</h2>\n      <ResizeObserver\n        onResize={({ width, height }) => {\n          console.log('resized!', { width, height });\n          setSize({ width, height });\n        }}\n      >\n        <textarea\n          placeholder=\"Try resizing this textarea\"\n          rows={5}\n          style={{ width: '100%', minWidth: '100px', maxWidth: '400px', minHeight: '50px' }}\n        />\n      </ResizeObserver>\n      <p>Current size: {size.width}px x {size.height}px</p>\n    </div>\n  );\n};\n\nconst container = document.getElementById('root');\nconst root = createRoot(container);\nroot.render(<App />);","lang":"typescript","description":"Demonstrates observing a textarea's dimensions and updating state upon resize using the ResizeObserver component."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=1.4.3"},{"fix":"Implement debouncing or throttling for your `onResize` handler to limit its execution rate. For example, use a utility function like `lodash.debounce`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `onResize` callback is causing synchronous layout changes that immediately trigger another resize event, leading to an infinite loop.","error":"Error: ResizeObserver loop limit exceeded"},{"fix":"Always provide a valid function to the `onResize` prop. `onResize={() => { /* handle resize */ }}`","cause":"The `onResize` prop was not provided or was `undefined` when the component tried to access it.","error":"TypeError: Cannot read properties of undefined (reading 'onResize')"}],"ecosystem":"npm"}