# virtual-list-lite

> A virtualize list implements

Latest version **2.0.1** (published 2023-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install virtual-list-lite
pnpm add virtual-list-lite
yarn add virtual-list-lite
bun add virtual-list-lite
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2023-12-25 |
| First published | 2023-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 32.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | thomfang |
| Maintainers | fon |
| Keywords | VirtualList, React VirtualList, Easy VirtualList, virtual-list, react-virtual-list, easy-virtual-list, virtual-list-lite, list-view, ListView, Typescript |

## Links

- npm: https://www.npmjs.com/package/virtual-list-lite
- Repository: https://github.com/thomfang/virtual-list-lite
- Homepage: https://github.com/thomfang/VirtualList#readme
- Issues: https://github.com/thomfang/VirtualList/issues
- npm.io page: https://npm.io/package/virtual-list-lite

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2023-12-25
- 2.0.0 — 2023-12-25

## README

# Virtual List

For efficiently rendering large lists data, simple and easy to use. 

## Installation

`npm i virtual-list-lite --save`

## Usage

### VirtualList

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

| Property Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| itemExtent | number | true | - | The size of each item, in order to calculate the size of the virtual list |
| bufferCount | number | true | - | Number of items of pre-rendered at the leading and trailing |
| countToTheTrailing | number | false | 0 | Set the number of items left at the tail to trigger scrolling onReachTheEnd event |
| direction | ScrollDirection | false | ScrollDirection.vertical | List view scroll direction |

### VirtualList for React

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

| Property Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| itemCount | number | true | - | List view item count |
| itemExtent | number | true | - | The size of each item, in order to calculate the size of the virtual list |
| bufferCount | number | true | - | Number of items of pre-rendered at the leading and trailing |
| countToTheTrailing | number | false | 0 | Set the number of items left at the tail to trigger scrolling onReachTheEnd event |
| onReachTheEnd | () => void | false | - | The event of list view scroll to the end |
| itemBuilder | (index: number) => React.JSXElement | true | - | List view item builder function |
| direction | ScrollDirection | false | ScrollDirection.vertical | List view scroll direction |
| containerStyles | React.CSSProperties | false | - | Custom list view container style |
| scrollerRef | React.RefObject<HTMLDivElement> | false | - | If the list view is scrolling by element outside, you should set this property |

---
_Source: https://npm.io/package/virtual-list-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._