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