@rc-component/virtual-list

_{Part of the Ant Design ecosystem.}

📜 Virtual scrolling list component for React.

English | 简体中文

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

importListfrom'@rc-component/virtual-list';constdata=Array.from({length: 1000}).map((_,index)=>({id: index,label: `Item ${index}`,}));exportdefault()=>(<Listdata={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.