https://github.com/koheing/svelte-virtual-infinite-list

Virtual List for Svelte. This make us load data infinitely.
https://github.com/koheing/svelte-virtual-infinite-list

infinite infinite-scroll list loading scroll svelte virtual

Last synced: 6 days ago
JSON representation

Virtual List for Svelte. This make us load data infinitely.

• Host: GitHub
• URL: https://github.com/koheing/svelte-virtual-infinite-list
• Owner: koheing
• License: other
• Created: 2021-04-01T12:57:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-07-19T01:59:42.000Z (over 1 year ago)
• Last Synced: 2024-10-24T02:36:15.767Z (22 days ago)
• Topics: infinite, infinite-scroll, list, loading, scroll, svelte, virtual
• Language: JavaScript
• Homepage: https://svelte.dev/repl/b19db3b0de424d72a451e95b5655a57e?version=3.46.2
• Size: 1.94 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# svelte-virtual-infinite-list([DEMO](https://svelte.dev/repl/b19db3b0de424d72a451e95b5655a57e?version=3.46.2))

[![test](https://github.com/koheing/svelte-virtual-infinite-list/actions/workflows/ci.yaml/badge.svg)](https://github.com/koheing/svelte-virtual-infinite-list/actions/workflows/ci.yaml)

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

This library is forked and extends from [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), and all the basic feature of [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list) are available except default slot.  

## Installation

```bash

npm i svelte-virtual-infinite-list

```

## Usage

```html

  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)

  }

  

  


    
{item.number}: {item.name}

  


  

  


    Loading...

  


  

  


    Empty

  


```

## 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` | This allows you to scroll to a specific offset.  |

| 2 |  `scrollToIndex` | `(index: number, options?: { align: 'top' \| 'bottom' \| 'center' }) => Promise` | This allows you to scroll to a specific item using the index. Returns `true` if this is done. |

| 3 |  `scrollToTop` | `() =>  Promise` | This allows you to scroll to top.  |

| 4 |  `scrollToBottom` | `() =>  Promise` | This allows you to scroll to bottom.  |

| 5 |  `reset` | `() =>  Promise` | This allows you to reset VirtualInfiniteList.  |

| 6 |  `forceRefresh` | `() =>  Promise` | This allows you to tick and render VirtualInfiniteList.  |

## LICENSE

[LIL (original)](https://github.com/sveltejs/svelte-virtual-list/blob/master/LICENSE)

[LIL+MIT](https://github.com/koheing/svelte-virtual-infinite-list/blob/main/LICENSE)