{"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.","language":"javascript","status":"renamed","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-resize-observer"],"cli":null},"imports":["import ResizeObserver from 'rc-resize-observer';","import type { ResizeObserverProps } from 'rc-resize-observer';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}