Virtual List
For efficiently rendering large lists data, simple and easy to use.
Installation
npm i virtual-list-lite --save
Usage
VirtualList
import { VirtualList, ScrollDirection } from 'virtual-list-lite'
const virtualList = new VirtualList({
itemExtent: 64,
bufferCount: 3,
countToTheTrailing: 3,
direction: ScrollDirection.vertical,
})
container.addEventListener('scroll', (e) => {
const {
shouldUpdate,
isReachTheEnd,
startIndex,
endIndex,
paddingLeading,
paddingTrailing,
shouldScrollToLeading
} = virtualList.compute(
container.offsetHeight,
e.scrollTop,
data.length,
Array.from(container.children),
);
});| Property Name | Type | Required | Default | Description |
|---|---|---|---|---|
| itemExtent | number | true | - | The size of each item, in order to calculate the size of the virtual list |
| bufferCount | number | true | - | Number of items of pre-rendered at the leading and trailing |
| countToTheTrailing | number | false | 0 | Set the number of items left at the tail to trigger scrolling onReachTheEnd event |
| direction | ScrollDirection | false | ScrollDirection.vertical | List view scroll direction |
VirtualList for React
import { ReactVirtualList } from 'virtual-list-lite'
const App = () => {
const [userList, setUserList] = useState([])
const [page, setPage] = useState(0)
const loadNextPage = () => {
setPage(page + 1)
}
useEffect(() => {
fetchUserList(page).then(newItems => {
setUserList([...userList, ...newItems])
})
}, [page])
return (
<ReactVirtualList
itemCount={userList.length}
itemExtent={100}
bufferCount={3}
onReachTheEnd={loadNextPage}
itemBuilder={(index) => (
<Item data={userList[index]} />
)}
/>
)
}| Property Name | Type | Required | Default | Description |
|---|---|---|---|---|
| itemCount | number | true | - | List view item count |
| itemExtent | number | true | - | The size of each item, in order to calculate the size of the virtual list |
| bufferCount | number | true | - | Number of items of pre-rendered at the leading and trailing |
| countToTheTrailing | number | false | 0 | Set the number of items left at the tail to trigger scrolling onReachTheEnd event |
| onReachTheEnd | () => void | false | - | The event of list view scroll to the end |
| itemBuilder | (index: number) => React.JSXElement | true | - | List view item builder function |
| direction | ScrollDirection | false | ScrollDirection.vertical | List view scroll direction |
| containerStyles | React.CSSProperties | false | - | Custom list view container style |
| scrollerRef | React.RefObject | false | - | If the list view is scrolling by element outside, you should set this property |