https://github.com/gearonixx/react-virtual-flow

Virtual scroll library for React applications for optimizing the handling of large datasets
https://github.com/gearonixx/react-virtual-flow

components list optimization perfomance react

Last synced: 26 days ago
JSON representation

Virtual scroll library for React applications for optimizing the handling of large datasets

• Host: GitHub
• URL: https://github.com/gearonixx/react-virtual-flow
• Owner: gearonixx
• Created: 2023-10-18T06:41:44.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-27T08:43:37.000Z (about 1 year ago)
• Last Synced: 2024-12-11T18:13:47.688Z (about 2 months ago)
• Topics: components, list, optimization, perfomance, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/virtual-flow
• Size: 99.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


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](https://github.com/Ayub-Begimkulov/youtube-tutorials/blob/master/virtualization-from-scratch/src/examples/DynamicHeight-improved.tsx).

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.

```tsx

import { VirtualFlow } from 'virtual-flow'

export const VirtualizedList = () => {

  return (

    

      {items.map((item, idx) => (

        

          {item.text}

        

      ))}

    

  )

}

```

If you are using a component, you should use [forwardRef](https://react.dev/reference/react/forwardRef)

to pass the ref to the regular element.

```tsx

export const Item = forwardRef<

  HTMLDivElement,

  WithChildren

>(({ children }, ref) => {

  return (

    


      {children}

    

  )

})

```


The library can work with dynamic heights of elements, implements caching of element heights,

reacts to changes in the length of elements (using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)) and also uses techniques such as scroll correction.



### Run Example

```sh

$ nx serve dev

```

### Run tests with Vitest

```sh

$ nx test

```

## Build library

```sh

$ 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 |