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.
npm install react-virtualized-auto-sizerVerified import paths — ran on the pinned version, not inferred.
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.
Refer to the migration guide for version 2.x. Use `renderProp` or `ChildComponent` props instead of `children` for passing a function. Default sizing should be handled by CSS or parent components, or by providing default values to the props received by the `renderProp` or `ChildComponent`.
Use the `ChildComponent` prop for passing a React component or `renderProp` for passing a function that returns JSX. `renderProp` is generally recommended for its flexibility.
Before integrating, check the documentation for your specific `react-window` version to determine if external auto-sizing is still necessary. You might be able to remove `react-virtualized-auto-sizer` for a smaller bundle size.
Ensure the parent element of `AutoSizer` has explicit CSS dimensions (e.g., `height: '100%'`, `width: '100%'`, fixed pixels). In SSR, handle the `0` values gracefully in your child component or consider using CSS to define a minimum size until hydration.
Change the import statement to use named imports: `import { AutoSizer } from 'react-virtualized-auto-sizer';`Ensure that the child component receiving `width` and `height` props from `AutoSizer` does not independently attempt to set its own dimensions in a way that conflicts with or triggers further resizes based on those props. Check for conflicting CSS properties like `box-sizing` or flexbox layouts where `AutoSizer` is a direct child of a flex container without an intermediate block element. This error is often benign and can sometimes be ignored in development.
Ensure that the parent of your `AutoSizer` component has explicit dimensions set via CSS (e.g., `style={{ height: '100%', width: '100%' }}`) or is contained within another element that provides those dimensions.Update your usage to explicitly use the `renderProp` for function-as-a-child pattern: `<AutoSizer renderProp={({ height, width }) => <MyComponent height={height} width={width} />} />`.