react-virtualized-auto-sizer

This package 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

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

Name	Description
Child	Child component to be passed the available width and height values as props. ℹ️ Width and height are undefined during the during the initial render (including server-rendering).

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

FAQs

Can I use this component with flexbox?

Flex containers don't prevent their children from growing and AutoSizer greedily grows to fill as much space as possible. Combining the two can be problematic. The simple way to fix this is to nest AutoSizer inside of a block element (like a <div>) rather than putting it as a direct child of the flex container, like so:

<div style={{ display: 'flex' }}>
  {/* Other children... */}
  <div style={{ flex: '1 1 auto' }}>
    <AutoSizer Child={ChildComponent} />
  </div>
</div>

Why is AutoSizer passing a height of 0?

AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with Flex layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0.

The solution to this problem is often to add height: 100% or flex: 1 to the parent. One easy way to test this is to add a style property (eg. background-color: red;) to the parent to visually confirm that it is the expected size.

Can I use AutoSizer to manage only width or height (not both)?

No, but you can memoize your child component so that it only re-renders if width (or height) changes.

import { memo } from "react";

const MemoizedChild = memo(
  Child,
  function arePropsEqual(oldProps, newProps) {
    return oldProps.height === newProps.height;
  }
);

Can this component work with a Content Security Policy?

The specification of Content Security Policy describes as the following:

This document defines Content Security Policy, a mechanism web applications can use to mitigate a broad class of content injection vulnerabilities, such as cross-site scripting (XSS).

To apply Content Security Policy, pass a nonce to AutoSizer and add a matching nonce-source to the Content-Security-Policy field in HTTP header.