mini-virtual-list
npm i mini-virtual-list
A tiny, speedy list virtualization library for React
Features
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 (
<List
items={items}
itemHeight={36}
{...size}
{...scroll}
render={FakeCard}
/>
);
};
```
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() |
A fixed-size virtual list hook |
useDynamicList() |
A dynamic-size virtual list hook |
usePositioner() |
A list item positioner for useDynamicList()](#usedynamiclist) |
useSize() |
A convenient hook for providing the container size to the <List> component |
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
jaredLunde