virtual-flow

An attempt to implement virtual scroll functionality in React for optimizing the handling of large datasets

Usage

Most of the solutions and implementations were taken from Ayub Begimkulov.

I just improved and extended it by decomposing, covering it with tests and adding a top-level API for easy use.

---

Installation

$ yarn add virtual-flow

Import the VirtualFlow component.

import { VirtualFlow } from 'virtual-flow'

export const VirtualizedList = () => {
  return (
    <VirtualFlow>
      {items.map((item, idx) => (
        <Item key={idx}>
          {item.text}
        </Item>
      ))}
    </VirtualFlow>
  )
}

If you are using a component, you should use forwardRef to pass the ref to the regular element.

export const Item = forwardRef<
  HTMLDivElement,
  WithChildren<ItemProps>
>(({ children }, ref) => {
  return (
    <div ref={ref}>
      {children}
    </div>
  )
})

The library can work with dynamic heights of elements, implements caching of element heights, reacts to changes in the length of elements (using ResizeObserver) and also uses techniques such as scroll correction.

Run Example

$ nx serve dev

Run tests with Vitest

$ nx test

Build library

$ nx build

---

Usage API

Property	Type	Description
onScroll	(scrollTop: number) => void	Callback, which will be called at the time of scrolling
estimateHeight	number	Approximate length of the element, it is highly recommended to set
scrollingDelay	number	Delay at which callback onScroll will be called
overscan	number	Number of elements that need to be rendered additionally
itemHeight	(height: number) => number	Constant height of the element. Use only if you have elements of the same length