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 for usage examples.

Note

This package began as a fork of the AutoSizer component from react-virtualized, and was intended for use with earlier versions of react-window. More recent versions of react-window use ResizeObserver natively and do not require this package.

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

Install

npm install --save react-virtualized-auto-sizer

FAQs

Frequently asked questions can be found here.

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 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).