`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
|
| className | Class name to be applied to the auto-sizer |
| 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 |
| 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 |
| tagName | Optional HTML tag name for root HTMLElement; defaults to |
| Child | Child component to be passed the available width and height values as props.
@deprecated Use the |
| ChildComponent | Child component to be passed the available width and height values as props. ℹ️ Use ⚠️ 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 ⚠️ Width and height are undefined during the during the initial render (including server-rendering). |