๐ Virtual scrolling list component for React.
See the code
Part of the Ant Design ecosystem.
๐ Virtual scrolling list component for React.
English | ็ฎไฝไธญๆ
npm install @rc-component/virtual-list
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>
);
Run the local dumi site:
npm install
npm start
Then open http://localhost:8000.
| 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 |
npm install
npm start
npm test
npm run build
The dumi site runs at http://localhost:8000 by default.
npm run prepublishOnly
The release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/virtual-list is released under the MIT license.
Overall
Maintained
Code review
Latest release
Releases this year
823 followers ยท starred Nov 2024
477 followers ยท starred Dec 2025
๐ Virtual scrolling list component for React.
See the code Part of the Ant Design ecosystem.
๐ Virtual scrolling list component for React.
English | ็ฎไฝไธญๆ
npm install @rc-component/virtual-list
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>
);
Run the local dumi site:
npm install
npm start
Then open http://localhost:8000.
| 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 |
npm install
npm start
npm test
npm run build
The dumi site runs at http://localhost:8000 by default.
npm run prepublishOnly
The release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/virtual-list is released under the MIT license.
Overall
Maintained
Code review
Latest release
Releases this year
823 followers ยท starred Nov 2024
477 followers ยท starred Dec 2025