v0.5.0

Breaking Change

In order to support having multiple instances of <InfiniteLoader /> on a page at once, the component has been changed to require the user to instantiate the LoaderState class themselves and pass an instance in via props. See the Example or Getting Started section of the README for a concrete example.

Migrating

Migration consists of the following three steps

1. Modify your import to point at the uppercase LoaderState class
2. Instantiate an instance of LoaderState yourself
3. Pass that instance into the InfiniteLoader component as a prop

<script lang="ts">
+  import { InfiniteLoader, LoaderState } from "svelte-infinite"
-  import { InfiniteLoader, loaderState } from "svelte-infinite"

+  const loaderState = new LoaderState()
  const allItems = $state([])

  const loadMore = async () => {
    const res = fetch("...")
    const data = await res.json()
    allItems.push(...data)
    loaderState.loaded()
  }
</script>

+ <InfiniteLoader {loaderState} triggerLoad={loadMore}>
- <InfiniteLoader triggerLoad={loadMore}>
  {#each allItems as user (user.id)}
    <div>{user.name}</div>
  {/each}
</InfiniteLoader>

v0.1.1

svelte-infinite

Rebuilt for Svelte 5 and runes!