Svelte Tiny Virtual List

svelte-tiny-virtual-list

A tiny but mighty list virtualization library, with zero dependencies 💪

About • Features • Installation • Usage • Examples • License

About

Instead of rendering all your data in a huge list, the virtual list component just renders the items that are visible, keeping your page nice and light.
This is heavily inspired by react-tiny-virtual-list and uses most of its code and functionality!

Features

• Tiny & dependency free – Only ~5kb gzipped
• Render millions of items, without breaking a sweat
• Scroll to index or set the initial scroll offset
• Supports fixed or variable heights/widths
• Vertical or Horizontal lists
• svelte-infinite-loading compatibility

Installation

With npm:

$ npm install svelte-tiny-virtual-list

With yarn:

$ yarn add svelte-tiny-virtual-list

With pnpm:

$ pnpm install svelte-tiny-virtual-list

Usage

<script>
    import VirtualList from 'svelte-tiny-virtual-list';

    const data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
</script>

<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
    {#snippet children({ style, index })}
        <div {style}>
            Letter: {data[index]}, Row: #{index}
        </div>
    {/snippet}
</VirtualList>

Also works pretty well with svelte-infinite-loading:

<script>
    import VirtualList from 'svelte-tiny-virtual-list';
    import InfiniteLoading from 'svelte-infinite-loading';

    let data = $state(['A', 'B', 'C', 'D', 'E', 'F' /* ... */]);

    function infiniteHandler({ detail: { complete, error } }) {
        try {
            // Normally you'd make an http request here...

            const newData = ['G', 'H', 'I', 'J', 'K', 'L' /* ... */];

            data = [...data, ...newData];
            complete();
        } catch (e) {
            error();
        }
    }
</script>

<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
    {#snippet children({ style, index })}
        <div {style}>
            Letter: {data[index]}, Row: #{index}
        </div>
    {/snippet}

    {#snippet footer()}
        <div>
            <InfiniteLoading on:infinite={infiniteHandler} />
        </div>
    {/snippet}
</VirtualList>

Props

Snippets

• children - Snippet for each item
  • Prop: { index, style }
    • index: number - Item index
    • style: string - Item style, must be applied to the snippet (look above for example)
• header - Snippet for the elements that should appear at the top of the list
• footer - Snippet for the elements that should appear at the bottom of the list (e.g. InfiniteLoading component from svelte-infinite-loading)

Methods

• recomputeSizes(startIndex: number) - This method force recomputes the item sizes after the specified index (these are normally cached).

VirtualList has no way of knowing when its underlying data has changed, since it only receives a itemSize property. If the itemSize is a number, this isn't an issue, as it can compare before and after values and automatically call recomputeSizes internally. However, if you're passing a function to itemSize, that type of comparison is error prone. In that event, you'll need to call recomputeSizes manually to inform the VirtualList that the size of its items has changed.

Use the methods like this:

<script>
    import { onMount } from 'svelte';
    import VirtualList from 'svelte-tiny-virtual-list';

    const data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];

    let virtualList;

    function handleClick() {
        virtualList.recomputeSizes(0);
    }
</script>

<button onclick={handleClick}>Recompute Sizes</button>

<VirtualList
    bind:this={virtualList}
    width="100%"
    height={600}
    itemCount={data.length}
    itemSize={50}
>
    {#snippet children({ style, index })}
        <div {style}>
            Letter: {data[index]}, Row: #{index}
        </div>
    {/snippet}
</VirtualList>

Styling

You can style the elements of the virtual list like this:

<script>
    import VirtualList from 'svelte-tiny-virtual-list';

    const data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
</script>

<div class="list">
    <VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
        {#snippet children({ style, index })}
            <div {style}>
                Letter: {data[index]}, Row: #{index}
            </div>
        {/snippet}
    </VirtualList>
</div>

<style>
    .list :global(.virtual-list-wrapper) {
        background-color: #0f0;
        /* ... */
    }

    .list :global(.virtual-list-inner) {
        background-color: #f00;
        /* ... */
    }
</style>

Examples / Demo

• Basic setup
  • Elements of equal height
  • Variable heights
  • Horizontal list
• Controlled props
  • Scroll to index
  • Controlled scroll offset
• Hacker News using svelte-infinite-loading

License

MIT License