usingAutoSizer.md

Using AutoSizer

The AutoSizer component decorates a React element and automatically manages width and height properties so that decorated element fills the available space. This simplifies usage of components like Grid, Table, and List that require explicit dimensions.

This guide covers a few of the most commonly asked questions about using the component.

Observation

This component uses javascript-detect-element-resize algorithm, and it does a little direct DOM manipulation to its parent, outside React's VirtualDOM.

If the parent has style position: static (default value), it changes to position: relative. It also injects a sibling div for size measuring.

Why is my AutoSizer setting 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. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)

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>

Can I use AutoSizer within a flex container?

When using an AutoSizer as a direct child of a flex box it usually works out best to wrap it with a div, 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>

Can I use AutoSizer with other HOCs like InfiniteLoader?

AutoSizer can be used within other react-virtualized HOCs such as InfiniteLoader or ScrollSync like so:

<InfiniteLoader {...infiniteLoaderProps}>
  {({ onRowsRendered, registerChild }) => (
    <AutoSizer>
      {({ height, width }) => (
        <List
          ref={registerChild}
          width={width}
          height={height}
          onRowsRendered={onRowsRendered}
          {...listProps}
        />
      )}
    </AutoSizer>
  )}
</InfiniteLoader>

You can see an example of this here.

Applying 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 react-virtualized and add a matching nonce-source to the Content-Security-Policy field in HTTP header.