virtual-list-lite v2.0.1

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),
  );
});

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]} />
      )}
    />
  )
}