• Grid updates direction when dir prop changes after mount

• Add optional rowKey prop to List and add optional rowKey/columnKey prop to Grid.

• Fixed a problem with project logo not displaying correctly in the README for the Firefox browser.

• useDynamicRowHeight should not instantiate ResizeObserver when server-rendering

• Use defaultHeight/defaultWidth prop to server render initial set of rows/cells
• Adjust TypeScript return type for rowComponent/cellComponent to work around a ReactNode vs ReactElement mismatch caused by #875

• Update README docs

• Update TS Doc comments for List and Grid imperative methods to specify when a method throws.
• Throw a RangeError (instead of a regular Error) if an invalid index is passed to one of the imperative scroll-to methods.

The return type of List and Grid components is explicitly annotated as ReactElement. The return type of rowComponent and cellComponent changed from ReactNode to ReactElement. This was done to fix TypeScript warnings for React versions 18.0 - 18.2. (See issue #875)

• Fix possible scroll-jump scenario with useDynamicRowHeight

• 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)

Documentation at: https://react-window-9gegorjnr-brian-vaughns-projects.vercel.app/

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

Thanks to @tnajdek for the PR!

Documentation at: https://react-window-8cygyvomv-brian-vaughns-projects.vercel.app/

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

Documentation at: https://react-window-8cygyvomv-brian-vaughns-projects.vercel.app/

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 {
  // ...
}

Documentation at: https://react-window-8cygyvomv-brian-vaughns-projects.vercel.app/

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

Documentation at: https://react-window-btpcws98u-brian-vaughns-projects.vercel.app/

• 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>
  );
}

Documentation at: https://react-window-btpcws98u-brian-vaughns-projects.vercel.app/

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

See the documentation for more details, but here is an example of what the v1 to v2 upgrade might look like:

Before

import { FixedSizeList, type ListChildComponentProps } from "react-window";

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

  return (
    <FixedSizeList
      children={Row}
      height={150}
      itemCount={1000}
      itemData={itemData}
      itemSize={25}
      width={300}
    />
  );
}

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[] }) {
  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>;
}

⚠️ 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)

Documentation at: https://react-window-btpcws98u-brian-vaughns-projects.vercel.app/

Documentation: https://react-window-v1.vercel.app/

• Fix scrollDirection when direction is RTL (#690)

• Readme changes

• 🐛 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).

• ✨ Updated peer dependencies to include React v18.

• ✨ Updated peer dependencies to include React v17.

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

• 🐛 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)

• 🐛 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)

• ✨ 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

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

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

• 🐛 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).

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

• 🎉 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)

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

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

• 🎉 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

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

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

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

• 🎉 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