react-virtualized-auto-sizer

What is react-virtualized-auto-sizer?

The react-virtualized-auto-sizer package is a utility component for React that automatically adjusts the size of its child component to fit the available space. It is commonly used in conjunction with other virtualization libraries to create performant, scrollable lists or grids that can handle large datasets efficiently.

What are react-virtualized-auto-sizer's main functionalities?

Auto-sizing a child component

This feature allows you to automatically adjust the size of a List component from the react-virtualized library to fit the available space. The AutoSizer component wraps around the List and provides the height and width as props.

```jsx
import React from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { List } from 'react-virtualized';

const MyList = ({ items }) => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        height={height}
        width={width}
        rowCount={items.length}
        rowHeight={20}
        rowRenderer={({ index, key, style }) => (
          <div key={key} style={style}>
            {items[index]}
          </div>
        )}
      />
    )}
  </AutoSizer>
);

export default MyList;
```

Other packages similar to react-virtualized-auto-sizer

react-window

react-window is a lightweight library for rendering large lists and tabular data. It is similar to react-virtualized but focuses on providing a smaller and faster implementation. Unlike react-virtualized-auto-sizer, react-window does not include an auto-sizing component out of the box, but it can be used with react-virtualized-auto-sizer for similar functionality.

react-virtual

react-virtual is a hook-based library for efficiently rendering large lists and grids. It is highly customizable and offers a modern API. While it does not include an auto-sizing component, it can be combined with other libraries like react-virtualized-auto-sizer to achieve similar results.

README

react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized

Install

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

License

MIT © bvaughn

Changelog

1.0.24

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