svelte-virtual-infinite-list

svelte-virtual-infinite-list(DEMO)

A virtual list component for Svelte apps. Instead of rendering all your data, <VirtuaInfinitelList> just renders the bits that are visible, keeping your page nice and light.

This library is forked and extends from @sveltejs/svelte-virtual-list, and all the basic feature of @sveltejs/svelte-virtual-list are available except default slot.

Installation

npm i svelte-virtual-infinite-list

Usage

<script lang="ts">
  import VirtualInfiniteList from 'svelte-virtual-infinite-list'
  import type { InfiniteEvent } from 'svelte-virtual-infinite-list'
  import { find } from './find'

  let things = [
    // these can be any values you like
    { name: 'one', number: 1 },
    { name: 'two', number: 2 },
    { name: 'three', number: 3 },
    // ...
    { name: 'six thousand and ninety-two', number: 6092 }
  ]

  let loading = true
  let virtualInfiniteList: VirtualInfiniteList

  async function onInitialize() {
    await virtualInfiniteList.scrollToBottom()
  }

  async function onInfinite({ detail }: InfiniteEvent) {
    if (detail.on === 'bottom') return
    loading = true

    const data = await find(30)
    things = [...data, ...things]

    loading = false
  }

  onMount(async () => {
    const data = await find(30)
    things = [...data]
    loading = false
  })

  async function scrollToIndex(item) {
    const index = things.findIndex((it) => it === item.number)
    index && await virtualInfiniteList.scrollToIndex(index)
  }
</script>

<VirtualInfiniteList
  items={things}
  {loading}
  direction="top"
  persists={30}
  uniqueKey={'number'}
  on:initialize={onInitialize}
  on:infinite={onInfinite}
  bind:this={virtualInfiniteList}
  let:item
>
  <!-- this will be rendered for each currently visible item -->
  <div slot="item">
    <p>{item.number}: {item.name}</p>
  </div>

  <!-- option -->
  <div slot="loader">
    Loading...
  </div>

  <!-- option -->
  <div slot="empty">
    Empty
  </div>
</VirtualInfiniteList>

Additional Props

No	Property Name	Type	Note
1	loading	boolean	-
2	direction	'top' or 'bottom' or 'vertical'	Loading direction.
3	maxItemCountPerLoad	number	Deprecated. This valiable removed @2.0.0. Use persists, please.
4	persists	number	[For direction-top infinite scroll user] Maximum number of items loaded per load. The offset after loaded may be significantly shift if the number of items that exceeds this value is loaded. Default value is 30.
5	uniqueKey	string	You need to set specify one unique property like id in the item object if you want to use the scrollToIndex method. Default value is undefined.

Additional Events

No	Property Name	Type	Note
1	on:initialize	() => any	Emit on change items count from 0 to more over.
2	on:infinite	(event: InfiniteEvent) => any	Emit on scrollbar reached top or bottom.

Additional Slots

No	Slot Name	Note
1	item	Displayed item
2	loader	Displayed element if loading is true
3	empty	Displayed element if items is [] and loading is false

Additional Methods

No	Method Name	Type	Note
1	scrollTo	(offset: number) => Promise<void>	This allows you to scroll to a specific offset.
2	scrollToIndex	(index: number, options?: { align: 'top' | 'bottom' | 'center' }) => Promise<boolean>	This allows you to scroll to a specific item using the index. Returns true if this is done.
3	scrollToTop	() => Promise<void>	This allows you to scroll to top.
4	scrollToBottom	() => Promise<void>	This allows you to scroll to bottom.
5	reset	() => Promise<void>	This allows you to reset VirtualInfiniteList.
6	forceRefresh	() => Promise<void>	This allows you to tick and render VirtualInfiniteList.

LICENSE

LIL (original)

LIL+MIT