mini-virtual-list

A tiny, dynamic list virtualization library for React

Usage no npm install needed!

<script type="module">
  import miniVirtualList from 'https://cdn.skypack.dev/mini-virtual-list';
</script>

README


mini-virtual-list

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i mini-virtual-list

A tiny, speedy list virtualization library for React

Features

  • Easy to use This component comes with the important batteries included and an easy to understand API.
  • Versatile Supports list items with both variable and fixed heights.
  • 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.
  • TypeScript Woohoo! Superior autocomplete and strict types mean fewer bugs in your implementation.

Quick Start

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 (
    <div
      style={{
        height: 540,
        width: 320,
        overflow: "auto",
      }}
      ref={ref}
    >
      <List
        items={items}
        itemHeight={36}
        {...size}
        {...scroll}
        render={FakeCard}
      />
    </div>
  );
};

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