mini-virtual-list
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    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

    Install

    npm i mini-virtual-list

    DownloadsWeekly Downloads

    961

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    275 kB

    Total Files

    49

    Last publish

    Collaborators

    • jaredlunde