mini-virtual-list
npm i mini-virtual-list
A tiny, speedy list virtualization library for React
## Features
- [x] **Easy to use** This component comes with the important batteries included and an easy to understand API.
- [x] **Versatile** Supports list items with both variable and fixed heights.
- [Variable size example on **CodeSandbox**](https://codesandbox.io/s/mini-virtual-list-example-r7fxt?file=/src/App.js)
- [Fixed size example on **CodeSandbox**](https://codesandbox.io/s/mini-virtual-list-fixed-example-q96ty?file=/src/App.js)
- [x] **Blazing™ fast** The fixed-size hooks and components have `O(1)` search performance, while the dynamic-size hooks and
components use binary search and have `O(log(n))` worst case performance.
- [x] **TypeScript** Woohoo! Superior autocomplete and _strict types_ mean fewer bugs in your implementation.
## Quick Start
```jsx harmony
import React, { useState, useLayoutEffect, useRef } from "react";
import randInt from "random-int";
import { List, useScroller, useSize } from "mini-virtual-list";
let items = [];
for (let i = 10000 * cur; i < cur * 10000 + 10000; i++)
items.push({ id: i, initialHeight: randInt(40, 140) });
const ListComponent = () => {
const ref = useRef(null);
const scroll = useScroller(ref);
const size = useSize(ref);
return (
);
};
```
## API
### Components
| Component | Description |
| ------------------------------- | ------------------------------------------------- |
| [``](#list) | A tiny, fast fixed-size virtual list component. |
| [``](#dynamiclist) | A tiny, fast dynamic-size virtual list component. |
### Hooks
| Hook | Description |
| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`useList()`](#uselist) | A fixed-size virtual list hook |
| [`useDynamicList()`](#usedynamiclist) | A dynamic-size virtual list hook |
| [`usePositioner()`](#usepositioner) | A list item positioner for `useDynamicList()`](#usedynamiclist) |
| [`useSize()`](#usesize) | A convenient hook for providing the container size to the `` component |
| [`useScroller()`](#usescroller) | A hook used for tracking a container node's scroll position. These values are used when calculating the number of rows to render and determining when we should disable pointer events on the masonry container to maximize scroll performance. |
---
### <List>
#### Props
| Prop | Type | Default | Required? | Description |
| ---- | ---- | ------- | --------- | ----------- |
| | | | | |
---
### <DynamicList>
#### Props
| Prop | Type | Default | Required? | Description |
| ---- | ---- | ------- | --------- | ----------- |
| | | | | |
---
### useList()
#### Arguments
| Argument | Type | Default | Required? | Description |
| -------- | ---- | ------- | --------- | ----------- |
| | | | | |
---
### useDynamicList()
#### Arguments
| Argument | Type | Default | Required? | Description |
| -------- | ---- | ------- | --------- | ----------- |
| | | | | |
---
### usePositioner()
#### Arguments
| Argument | Type | Default | Required? | Description |
| -------- | ---- | ------- | --------- | ----------- |
| | | | | |
---
### useSize()
#### Arguments
| Argument | Type | Default | Required? | Description |
| -------- | ---- | ------- | --------- | ----------- |
| | | | | |
#### Returns
---
### useScroller()
#### Arguments
| Argument | Type | Default | Required? | Description |
| -------- | ---- | ------- | --------- | ----------- |
| | | | | |
#### Returns
## LICENSE
MIT