virtual-flow v0.0.4

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