{"library":"react-virtualized-auto-sizer","title":"React Virtualized AutoSizer","description":"react-virtualized-auto-sizer is a specialized React component designed to automatically measure the available width and height of its parent HTMLElement and pass these dimensions as props to its child component. It leverages the modern ResizeObserver API for efficient and accurate dimension tracking. The package is currently at version 2.0.3 and is actively maintained, with recent updates focused on bug fixes and documentation. It originated as a fork of the `AutoSizer` component from `react-virtualized` and was initially intended to complement `react-window` for auto-sizing virtualized lists. However, it's important to note that more recent versions of `react-window` have integrated native ResizeObserver support, potentially making this package redundant for those specific use cases. Its key differentiators include precise sub-pixel measurements (using `getBoundingClientRect`), support for various ResizeObserver box models, and a flexible render prop API.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-virtualized-auto-sizer"],"cli":null},"imports":["import { AutoSizer } from 'react-virtualized-auto-sizer';","import type { Size } from 'react-virtualized-auto-sizer';","import type { AutoSizerProps } from 'react-virtualized-auto-sizer';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { AutoSizer } from 'react-virtualized-auto-sizer';\nimport React, { FC } from 'react';\nimport { createRoot } from 'react-dom/client';\n\ninterface MyContentProps {\n  width: number;\n  height: number;\n}\n\n// A simple child component that receives width and height props\nconst MyContentComponent: FC<MyContentProps> = ({ width, height }) => {\n  if (width === 0 || height === 0) {\n    return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n      <p>Parent has zero dimensions. Waiting for resize...</p>\n    </div>;\n  }\n\n  return (\n    <div style={{ width, height, border: '1px solid #007bff', padding: '10px', overflow: 'auto' }}>\n      <p>Content sized by AutoSizer:</p>\n      <p>Width: {width.toFixed(2)}px</p>\n      <p>Height: {height.toFixed(2)}px</p>\n      <div style={{ height: 200, background: '#e0f7fa', margin: '10px 0' }}>\n        Scrollable content placeholder.\n      </div>\n      <div style={{ height: 200, background: '#e0f7fa', margin: '10px 0' }}>\n        More content to fill space.\n      </div>\n    </div>\n  );\n};\n\nconst App = () => (\n  <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', padding: '16px', boxSizing: 'border-box' }}>\n    <h1 style={{ marginBottom: '16px' }}>AutoSizer Basic Usage</h1>\n    <p style={{ marginBottom: '16px' }}>Resize your browser window to see the AutoSizer adjust its child's dimensions dynamically.</p>\n    <div style={{ flexGrow: 1, border: '2px dashed #6c757d', minHeight: '100px', display: 'flex' }}>\n      <AutoSizer>\n        {({ height, width }) => (\n          <MyContentComponent width={width} height={height} />\n        )}\n      </AutoSizer>\n    </div>\n  </div>\n);\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<App />);\n} else {\n  console.error('Root element not found. Please ensure an element with id=\"root\" exists in your HTML.');\n}","lang":"typescript","description":"This quickstart demonstrates how to use `AutoSizer` to automatically adjust the dimensions of a child component based on its parent's available space, displaying the measured width and height.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}