IE / Edge |
Firefox |
Chrome |
Safari |
Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
npm install ro-virtual-scroll
Then add the component to your react
app. For example:
index.js
import React from 'react';
import faker from 'faker';
import RoVirtualScroller from 'ro-virtual-scroll';
const listData = new Array(500000).fill(null).map((item, index) => ({
key: `_${index}`,
value: `${index}_${faker.lorem.sentences()}`,
}));
export default function TestVirtual() {
return (
<RoVirtualScroller
className="someclass"
style={{ height: '500px', width: '400px' }}
listData={listData}
estimatedItemSize={50}
render={(visibleData) =>
visibleData.map((item) => (
<div key={item.key} style={{ borderBottom: '1px solid black' }}>
<div>{item.value}</div>
</div>
))
}
/>
);
}