react-virtualized-auto-sizer 2.0.0

on Node.js NPM

Version 2 simplifies the API and improves TypeScript support.

Migrating from 1.x to 2.x

Refer to the docs for a complete list of props and API methods. Below are some examples of migrating from version 1 to 2, but first a couple of potential questions:

Q: Why were the defaultHeight and defaultWidth props removed?

A: The more idiomatic way of setting default width and height is to use default parameters; see below for examples.

Q: Why were the disableHeight and disableWidth props removed?

A: These props interfered with the TypeScript inference (see issue #100). `React.memo` can be used to achieve this behavior instead; see below for examples.

Q: Why was the doNotBailOutOnEmptyChildren prop removed?

A: This component no longer bails out on empty children; this decision is left up to the child component.

Q: Does AutoSizer support CSS transitions/animations?

A: To an extent, but as with ResizeObserver, there is no event dispatched when a CSS transition is complete (see issue #99). As a potential workaround, the box property can be used to report unscaled size; see below for examples.

Basic usage

// Version 1
<AutoSizer>
  {({ height, width }) => {
    // ...
  }}
</AutoSizer>

// Version 2
<AutoSizer
  Child={({ height, width }) => {
    // ...
  }}
/>

Default width/height for server rendered content

// Version 1
<AutoSizer defaultWidth={800} defaultHeight={600} {...rest} />

// Version 2
<AutoSizer
  Child={({ height = 600, width = 800 }) => {
    // ...
  }}
/>

Width only (or height only)

// Version 1
<AutoSizer disableWidth {...rest} />

// Version 2
<AutoSizer Child={MemoizedChild} />

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