react-component/virtual-list

README

@rc-component/virtual-list

_{Part of the Ant Design ecosystem.}

📜 Virtual scrolling list component for React.

Highlights

Built for React and maintained by the rc-component team.
Used by Ant Design and other React component libraries.
Ships TypeScript declarations with both ES module and CommonJS outputs.
Keeps examples, tests, and preview builds aligned with the package source.

Install

npm install @rc-component/virtual-list

Usage

import List from '@rc-component/virtual-list';

const data = Array.from({ length: 1000 }).map((_, index) => ({
  id: index,
  label: `Item ${index}`,
}));

export default () => (
  <List data={data} height={240} itemHeight={32} itemKey="id">
    {(item) => <div>{item.label}</div>}
  </List>
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

List

Prop	Description	Type	Default
children	Render function for each item. The third argument contains measuring props used by legacy browser compatibility paths.	`(item, index, props) => ReactElement`	-
component	Custom list container element.	`string` \| `ComponentType`	`div`
data	Items rendered by the virtual list.	`T[]`	-
fullHeight	Whether the holder should keep full height.	`boolean`	`true`
height	Visible list height.	`number`	-
itemHeight	Minimum item height used to calculate the virtual range.	`number`	-
itemKey	Key field or key getter for items.	`string` \| `(item) => React.Key`	-
onScroll	Called when the list scrolls.	`React.UIEventHandler<HTMLElement>`	-
styles	Custom scrollbar part styles.	`object`	-
virtual	Enable virtual rendering.	`boolean`	`true`

Development

npm install
npm start
npm test
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/virtual-list is released under the MIT license.