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 |