react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized.

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

Install

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

Documentation

Examples

Some components (like those found in react-window or react-virtualized) require numeric width and height parameters. The AutoSizer component can be useful if you want to pass percentage based dimensions.

import AutoSizer from "react-virtualized-auto-sizer";

// UI
<AutoSizer>
  {({ height, width }) => {
    // Use these actual sizes to calculate your percentage based sizes
  }}
</AutoSizer>;

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>
      {({ height, width }) => (
        <Component
          width={width}
          height={height}
          {...props}
        />
      )}
    </AutoSizer>
  </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 flexbox 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)?

You can use AutoSizer to control only one dimension of its child component using the disableHeight or disableWidth attributes. For example, a fixed-height component that should grow to fill the available width can be created like so:

<AutoSizer disableHeight>
  {({width}) => <Component height={200} width={width} {...props} />}
</AutoSizer>

Module parsing fails because of an unexpected token?

This package targets ECMAScript 2015 (ES6) and requires a build tool such as babel-loader that is capable of parsing the ES6 class syntax.

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.

Changelog

1.0.25

• Dependencies updated to include React 19

1.0.24

• Add optional doNotBailOutOnEmptyChildren prop to AutoSizer to override default behavior of not rendering children when either width or height are 0

1.0.23

• Bugfix: Use ResizeObserver global from parentNode realm to support case with multiple realms (#82)

1.0.22

• Bugfix: Treat empty-string padding values as 0

1.0.21

• TypeScript change only; AutoSizer return type changed from ReactElement to ReactNode

1.0.20

• Guard against potential state update after unmount (caused by setTimeout when using ResizeObserver)

1.0.19

• Further improved TypeScript definitions to avoid any types for children function parameters.
• 61: Build release bundle with Preconstruct.

1.0.18

• Refine TypeScript types so that disableHeight and disableWidth are properly paired with conditional types like children and onResize.

1.0.17

• Support non-integer padding styles.

1.0.16

• Relaxed children prop return type from ReactElement to ReactNode.

1.0.15

• Readme changes

1.0.14

• Fix potential "ResizeObserver loop limit exceeded" error caused by long-running renders (#55)

1.0.13

• Transpile nullish coalescing operator (#53)

1.0.12

• Fix regression introduced in 1.0.8 with transformations; pass unscaled width and height as "default" params (and add additional scaledHeight and scaledWidth params to children function)
• Use ResizeObserver when possible; fallback to legacy resize polyfill logic otherwise

1.0.11

• Pre-transform static class property syntax (defaultProps) (#46)
• Fixed bad TypeScript definition for onResize prop (#44)

1.0.10

• Add named exports for AutoSizer as well as Props and Size types.

1.0.9

• Add optional tagName property (default to "div").

1.0.8

• Replace offsetHeight/offsetWidth with getBoundingClientRect to better support floating size values
• Spread all additional props onto out HTMLDivElement

1.0.7

• Add peer dependency for "react" / "react-dom" version 18

1.0.6

• Fixed rAF throttling issue caused by new Chrome flag (#39)

1.0.5

• Add peer dependency for "react" / "react-dom" version 17

1.0.4

• Do not use innerHTML when detecting element resize as this will throw an error if the page uses Trusted Types (#30)