`react-virtualized-auto-sizer`: Measures the available width and height of an `HTMLElement` and passes those values as props to a `Child` component. Refer to [the docs](https://react-virtualized-auto-sizer.vercel.app/examples/basic-usage) for usage examples. > [!NOTE] > This package began as a fork of the `AutoSizer` component from [react-virtualized](https://github.com/bvaughn/react-virtualized), and was intended for use with earlier versions of [react-window](https://github.com/bvaughn/react-virtualized). More recent versions of `react-window` use `ResizeObserver` natively and do not require this package. ### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/) ## Install ```bash npm install --save react-virtualized-auto-sizer ``` ## FAQs Frequently asked questions can be found [here](https://react-virtualized-auto-sizer.vercel.app/common-questions). ## Documentation ### AutoSizer Measures the available width and height of its parent `HTMLElement` and passes those values as `width` and `height` props to its `children`. ℹ️ This component began as a fork of the [javascript-detect-element-resize](https://www.npmjs.com/package/javascript-detect-element-resize) package. #### Required props None #### Optional props

Name	Description
box	Corresponds to the `ResizeObserver` box parameter. Sets which box model the observer will observe changes to. `border-box`: Size of the box border area as defined in CSS. `content-box`: Size of the content area as defined in CSS. `device-pixel-content-box`: The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.
className	Class name to be applied to the auto-sizer `HTMLElement`.
data-testid	Test id attribute to interop with frameworks like Testing Library.
id	Unique id attribute to attach to root DOM element.
nonce	Nonce used for inline `StyleSheet` in browsers/environments that do not support the `ResizeObserver` API.
onResize	Optional callback notified after a resize. @param size New width and height of parent element
style	Style properties to be applied to the auto-sizer `HTMLElement`.
tagName	Optional HTML tag name for root HTMLElement; defaults to `"div"`.
Child	Child component to be passed the available width and height values as props. @deprecated Use the `ChildComponent` or `renderProp` props instead.
ChildComponent	Child component to be passed the available width and height values as props. ℹ️ Use `renderProp` instead if you need access to local state. ⚠️ Width and height are undefined during the during the initial render (including server-rendering).
renderProp	Render prop to be passed the available width and height values as props. ℹ️ Use `ChildComponent` instead for better memoization if you do not need access to local state. ⚠️ Width and height are undefined during the during the initial render (including server-rendering).