Changelog

2.2.0

Support for dynamic row heights via new useDynamicRowHeight hook.

const rowHeight = useDynamicRowHeight({
  defaultRowHeight: 50
});

return <List rowHeight={rowHeight} {...rest} />;

Smaller NPM bundle; (docs are no longer included as part of the bundle due to the added size)

2.1.2

Prevent ResizeObserver API from being called at all if an explicit List height (or Grid width and height) is provided.

2.1.1

Grids with only one row no longer incorrectly set cell height to 100%.

2.1.0

Improved ARIA support:

Add better default ARIA attributes for outer HTMLDivElement
Add optional ariaAttributes prop to row and cell renderers to simplify better ARIA attributes for user-rendered cells
Remove intermediate HTMLDivElement from List and Grid
- This may enable more/better custom CSS styling
- This may also enable adding an optional children prop to List and Grid for e.g. overlays/tooltips
Add optional tagName prop; defaults to "div" but can be changed to e.g. "ul"

// Example of how to use new `ariaAttributes` prop
function RowComponent({
  ariaAttributes,
  index,
  style,
  ...rest
}: RowComponentProps<object>) {
  return (
    <div style={style} {...ariaAttributes}>
      ...
    </div>
  );
}

Added optional children prop to better support edge cases like sticky rows.

Minor changes to onRowsRendered and onCellsRendered callbacks to make it easier to differentiate between visible items and items rendered due to overscan settings. These methods will now receive two params– the first for visible rows and the second for all rows (including overscan), e.g.:

function onRowsRendered(
  visibleRows: {
    startIndex: number;
    stopIndex: number;
  },
  allRows: {
    startIndex: number;
    stopIndex: number;
  }
): void {
  // ...
}

function onCellsRendered(
  visibleCells: {
    columnStartIndex: number;
    columnStopIndex: number;
    rowStartIndex: number;
    rowStopIndex: number;
  },
  allCells: {
    columnStartIndex: number;
    columnStopIndex: number;
    rowStartIndex: number;
    rowStopIndex: number;
  }
): void {
  // ...
}

2.0.2

Fixed edge-case bug with Grid imperative API scrollToCell method and "smooth" scrolling behavior.

2.0.1

Remove ARIA role attribute from List and Grid. This resulted in potentially invalid configurations (e.g. a ARIA list should contain at least one listitem but that was not enforced by this library). Users of this library should specify the role attribute that makes the most sense to them based on mdn guidelines. For example:

<List
  role="list"
  rowComponent={RowComponent}
  rowCount={names.length}
  rowHeight={25}
  rowProps={{ names }}
/>;

function RowComponent({ index, style, ...rest }: RowComponentProps<object>) {
  return (
    <div role="listitem" style={style}>
      ...
    </div>
  );
}

2.0.0

Version 2 is a major rewrite that offers the following benefits:

More ergonomic props API
Automatic memoization of row/cell renderers and props/context
Automatically sizing for List and Grid (no more need for AutoSizer)
Native TypeScript support (no more need for @types/react-window)
Smaller bundle size

Upgrade path

This section contains a couple of examples for common upgrade paths. Please refer to the documentation for more information.

Migrating `FixedSizeList`

Before

import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList, type ListChildComponentProps } from "react-window";

function Example({ names }: { names: string[] }) {
  const itemData = useMemo<ItemData>(() => ({ names }), [names]);

  return (
    <AutoSizer>
      {({ height, width }) => (
        <FixedSizeList
          children={Row}
          height={height}
          itemCount={names.length}
          itemData={itemData}
          itemSize={25}
          width={width}
        />
      )}
    </AutoSizer>
  );
}

function Row({
  data,
  index,
  style
}: ListChildComponentProps<{
  names: string[];
}>) {
  const { names } = data;
  const name = names[index];
  return <div style={style}>{name}</div>;
}

After

import { List, type RowComponentProps } from "react-window";

function Example({ names }: { names: string[] }) {
  // You don't need to useMemo for rowProps;
  // List will automatically memoize them
  return (
    <List
      rowComponent={RowComponent}
      rowCount={names.length}
      rowHeight={25}
      rowProps={{ names }}
    />
  );
}

function RowComponent({
  index,
  names,
  style
}: RowComponentProps<{
  names: string[];
}>) {
  const name = names[index];
  return <div style={style}>{name}</div>;
}

Migrating `VariableSizedList`

Before

import AutoSizer from "react-virtualized-auto-sizer";
import { VariableSizeList, type ListChildComponentProps } from "react-window";

function Example({ items }: { items: Item[] }) {
  const itemData = useMemo<ItemData>(() => ({ items }), [items]);
  const itemSize = useCallback(
    (index: number) => {
      const item = itemData.items[index];
      return item.type === "header" ? 40 : 20;
    },
    [itemData]
  );

  return (
    <AutoSizer>
      {({ height, width }) => (
        <VariableSizeList
          children={Row}
          height={height}
          itemCount={items.length}
          itemData={itemData}
          itemSize={itemSize}
          width={width}
        />
      )}
    </AutoSizer>
  );
}

function itemSize();

function Row({
  data,
  index,
  style
}: ListChildComponentProps<{
  items: Item[];
}>) {
  const { items } = data;
  const item = items[index];
  return <div style={style}>{item.label}</div>;
}

After

import { List, type RowComponentProps } from "react-window";

type RowProps = {
  items: Item[];
};

function Example({ items }: { items: Item[] }) {
  // You don't need to useMemo for rowProps;
  // List will automatically memoize them
  return (
    <List
      rowComponent={RowComponent}
      rowCount={items.length}
      rowHeight={rowHeight}
      rowProps={{ items }}
    />
  );
}

// The rowHeight method also receives the extra props,
// so it can be defined at the module level
function rowHeight(index: number, { item }: RowProps) {
  return item.type === "header" ? 40 : 20;
}

function RowComponent({ index, items, style }: RowComponentProps<RowProps>) {
  const item = items[index];
  return <div style={style}>{item.label}</div>;
}

Migrating `FixedSizeGrid`

Before

import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeGrid, type GridChildComponentProps } from "react-window";

function Example({ data }: { data: Data[] }) {
  const itemData = useMemo<ItemData>(() => ({ data }), [data]);

  return (
    <AutoSizer>
      {({ height, width }) => (
        <FixedSizeGrid
          children={Cell}
          columnCount={data[0]?.length ?? 0}
          columnWidth={100}
          height={height}
          itemData={itemData}
          rowCount={data.length}
          rowHeight={35}
          width={width}
        />
      )}
    </AutoSizer>
  );
}

function Cell({
  columnIndex,
  data,
  rowIndex,
  style
}: GridChildComponentProps<{
  names: string[];
}>) {
  const { data } = data;
  const datum = data[index];
  return <div style={style}>...</div>;
}

After

import { FixedSizeGrid, type GridChildComponentProps } from "react-window";

function Example({ data }: { data: Data[] }) {
  // You don't need to useMemo for cellProps;
  // Grid will automatically memoize them
  return (
    <Grid
      cellComponent={Cell}
      cellProps={{ data }}
      columnCount={data[0]?.length ?? 0}
      columnWidth={75}
      rowCount={data.length}
      rowHeight={25}
    />
  );
}

function Cell({
  columnIndex,
  data,
  rowIndex,
  style
}: CellComponentProps<{
  data: Data[];
}>) {
  const datum = data[rowIndex][columnIndex];
  return <div style={style}>...</div>;
}

Migrating `VariableSizeGrid`

Before

import AutoSizer from "react-virtualized-auto-sizer";
import { VariableSizeGrid, type GridChildComponentProps } from "react-window";

function Example({ data }: { data: Data[] }) {
  const itemData = useMemo<ItemData>(() => ({ data }), [data]);

  const columnWidth = useCallback(
    (columnIndex: number) => {
      // ...
    },
    [itemData]
  );

  const rowHeight = useCallback(
    (rowIndex: number) => {
      // ...
    },
    [itemData]
  );

  return (
    <AutoSizer>
      {({ height, width }) => (
        <VariableSizeGrid
          children={Cell}
          columnCount={data[0]?.length ?? 0}
          columnWidth={columnWidth}
          height={height}
          itemData={itemData}
          rowCount={data.length}
          rowHeight={rowHeight}
          width={width}
        />
      )}
    </AutoSizer>
  );
}

function Cell({
  columnIndex,
  data,
  rowIndex,
  style
}: GridChildComponentProps<{
  names: string[];
}>) {
  const { data } = data;
  const datum = data[index];
  return <div style={style}>...</div>;
}

After

import { FixedSizeGrid, type GridChildComponentProps } from "react-window";

type CellProps = {
  data: Data[];
};

function Example({ data }: { data: Data[] }) {
  // You don't need to useMemo for cellProps;
  // Grid will automatically memoize them
  return (
    <Grid
      cellComponent={Cell}
      cellProps={{ data }}
      columnCount={data[0]?.length ?? 0}
      columnWidth={columnWidth}
      rowCount={data.length}
      rowHeight={rowHeight}
    />
  );
}

// The columnWidth method also receives the extra props,
// so it can be defined at the module level
function columnWidth(columnIndex: number, { data }: CellProps) {
  // ...
}

// The rowHeight method also receives the extra props,
// so it can be defined at the module level
function rowHeight(rowIndex: number, { data }: CellProps) {
  // ...
}

function Cell({
  columnIndex,
  data,
  rowIndex,
  style
}: CellComponentProps<CellProps>) {
  const datum = data[rowIndex][columnIndex];
  return <div style={style}>...</div>;
}

⚠️ Version 2 requirements

The following requirements are new in version 2 and may be reasons to consider not upgrading:

Peer dependencies now require React version 18 or newer
ResizeObserver primitive (or polyfill) is required unless explicit pixel dimensions are provided via style prop; (see documentation for more)

1.8.11

Dependencies updated to include React 19

1.8.10

Fix scrollDirection when direction is RTL (#690)

1.8.9

Readme changes

1.8.8

🐛 scrollToItem accounts for scrollbar size in the uncommon case where a List component has scrolling in the non-dominant direction (e.g. a "vertical" layout list also scrolls horizontally).

1.8.7

✨ Updated peer dependencies to include React v18.

1.8.6

✨ Updated peer dependencies to include React v17.

1.8.5

✨ Added UMD (dev and prod) build - (emmanueltouzery - #281)

1.8.4

🐛 Fixed size list and grid components now accurately report visibleStopIndex in onItemsRendered. (Previously this value was incorrectly reported as one index higher.) - (justingrant - #274)
🐛 Fixed size list and grid components scrollToItem "center" mode when the item being scrolled to is near the viewport edge. - (justingrant - #274)

1.8.3

🐛 Edge case bug-fix for scrollToItem when scrollbars are present (MarkFalconbridge - #267)
🐛 Fixed RTL scroll offsets for non-Chromium Edge (MarkFalconbridge - #268)
🐛 Flow types improved (TrySound - #260)

1.8.2

✨ Deprecated grid props overscanColumnsCount and overscanRowsCount props in favor of more consistently named overscanColumnCount and overscanRowCount. (nihgwu - #229)
🐛 Fixed shaky elastic scroll problems present in iOS Safari. #244
🐛 Fixed RTL edge case bugs and broken scroll-to-item behavior. #159
🐛 Fixed broken synchronized scrolling for RTL lists/grids. #198

1.8.1

🐛 Replaced an incorrect empty-string value for pointer-events with undefined (oliviertassinari - #210)

1.8.0

🎉 Added new "smart" align option for grid and list scroll-to-item methods (gaearon - #209)

1.7.2

🐛 Add guards to avoid invalid scroll offsets when scrollTo() is called with a negative offset or when scrollToItem is called with invalid indices (negative or too large).

1.7.1

🐛 Fix SSR regression introduced in 1.7.0 - (Betree - #185)

1.7.0

🎉 Grid scrollToItem supports optional rowIndex and columnIndex params (jgoz - #174)
DEV mode checks for WeakSet support before using it to avoid requiring a polyfill for IE11 - (jgoz - #167)

1.6.2

🐛 Bugfix for RTL when scrolling back towards the beginning (right) of the list.

1.6.1

🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and "scroll" events.

1.6.0

🎉 RTL support added for lists and grids. Special thanks to davidgarsan for his support. - #156
🐛 Grid scrollToItem methods take scrollbar size into account when aligning items - #153

1.5.2

🐛 Edge case bug fix for VariableSizeList and VariableSizeGrid when the number of items decreases while a scroll is in progress. - (iamsolankiamit - #138)

1.5.1

🐛 Updated getDerivedState Flow annotations to address a warning in a newer version of Flow.

1.5.0

🎉 Added advanced memoization helpers methods areEqual and shouldComponentUpdate for item renderers. - #114

1.4.0

🎉 List and Grid components now "overscan" (pre-render) in both directions when scrolling is not active. When scrolling is in progress, cells are only pre-rendered in the direction being scrolled. This change has been made in an effort to reduce visible flicker when scrolling starts without adding additional overhead during scroll (which is the most performance sensitive time).
🎉 Grid components now support separate overscanColumnsCount and overscanRowsCount props. Legacy overscanCount prop will continue to work, but with a deprecation warning in DEV mode.
🐛 Replaced setTimeout with requestAnimationFrame based timer, to avoid starvation issue for isScrolling reset. - #106
🎉 Renamed List and Grid innerTagName and outerTagName props to innerElementType and outerElementType to formalize support for attaching arbitrary props (e.g. test ids) to List and Grid inner and outer DOM elements. Legacy innerTagName and outerTagName props will continue to work, but with a deprecation warning in DEV mode.
🐛 List re-renders items if direction prop changes. - #104

1.3.1

🎉 Pass itemData value to custom itemKey callbacks when present - #90)

1.3.0

(Skipped)

1.2.4

🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow

1.2.3

🐛 Relaxed children validation checks. They were too strict and didn't support new React APIs like memo.

1.2.2

🐛 Improved Flow types for class component item renderers - (nicholas-l - #77)

1.2.1

🎉 Improved Flow types to include optional itemData parameter. (TrySound - #66)
🐛 VariableSizeList and VariableSizeGrid no longer call size getter functions with invalid index when item count is zero.

1.2.0

🎉 Flow types added to NPM package. (TrySound - #40)
🎉 Relaxed grid scrollTo method to make scrollLeft and scrollTop params optional (so you can only update one axis if desired). - #63)
🐛 Fixed invalid this pointer in VariableSizeGrid that broke the resetAfter* methods - #58)
Upgraded to babel 7 and used shared runtime helpers to reduce package size slightly. (TrySound - #48)
Remove overflow:hidden from inner container (souporserious - #56)

1.1.2

🐛 Fixed edge case scrollToItem bug that caused lists/grids with very few items to have negative scroll offsets.

1.1.1

🐛 FixedSizeGrid and FixedSizeList automatically clear style cache when item size props change.

1.1.0

🎉 Use explicit constructor and super to generate cleaner component code. (Andarist - #26)
🎉 Add optional shouldForceUpdate param reset-index methods to specify forceUpdate behavior. (nihgwu - #32)

1.0.3

🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.

1.0.2

🎉 Enable Babel annotate-pure-calls option so that classes compiled by "transform-es2015-classes" are annotated with #__PURE__. This enables UglifyJS to remove them if they are not referenced, improving dead code elimination in application code. (Andarist - #20)
🎉 Update "rollup-plugin-peer-deps-external" and use new includeDependencies flag so that the "memoize-one" dependency does not get inlined into the Rollup bundle. (Andarist - #19)
🎉 Enable Babel "loose" mode to reduce package size (-8%). (Andarist - #18)

1.0.1

Updated README.md file to remove @alpha tag from NPM installation instructions.

1.0.0

Initial release of library. Includes the following components:

FixedSizeGrid
FixedSizeList
VariableSizeGrid
VariableSizeList

Package detail

readme

react-window

Support

Installation

Documentation

TypeScript types

changelog

Changelog

2.2.0

2.1.2

2.1.1

2.1.0

2.0.2

2.0.1

2.0.0

Upgrade path

Migrating FixedSizeList

Before

After

Migrating VariableSizedList

Before

After

Migrating FixedSizeGrid

Before

After

Migrating VariableSizeGrid

Before

After

⚠️ Version 2 requirements

1.8.11

1.8.10

1.8.9

1.8.8

1.8.7

1.8.6

1.8.5

1.8.4

1.8.3

1.8.2

1.8.1

1.8.0

1.7.2

1.7.1

1.7.0

1.6.2

1.6.1

1.6.0

1.5.2

1.5.1

1.5.0

1.4.0

1.3.1

1.3.0

1.2.4

1.2.3

1.2.2

1.2.1

1.2.0

1.1.2

1.1.1

1.1.0

1.0.3

1.0.2

1.0.1

1.0.0

Migrating `FixedSizeList`

Migrating `VariableSizedList`

Migrating `FixedSizeGrid`

Migrating `VariableSizeGrid`