Changelog
2.2.5
- 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
2.2.4
2.2.3
- 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.
2.2.2
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)
2.2.1
- Fix possible scroll-jump scenario with
useDynamicRowHeight
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"
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[] }) {
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[] }) {
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[] }) {
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[] }) {
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
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
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
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
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:
FixedSizeGridFixedSizeListVariableSizeGridVariableSizeList
bvaughn
