Events & Callbacks

onLoadMore?: () => void | Promise<void>

<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'

    let items = $state([...initialItems])
    let hasMore = $state(true)
    let isLoading = $state(false)

    async function loadMore() {
        if (isLoading) return
        isLoading = true

        try {
            const newItems = await fetchMoreItems()
            items = [...items, ...newItems]

            if (newItems.length === 0) {
                hasMore = false
            }
        } finally {
            isLoading = false
        }
    }
</script>

<VirtualList
    {items}
    onLoadMore={loadMore}
    {hasMore}
    loadMoreThreshold={10}
>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>

debugFunction?: (info: SvelteVirtualListDebugInfo) => void

<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'
    import type { SvelteVirtualListDebugInfo } from '@humanspeak/svelte-virtual-list'

    function onDebug(info: SvelteVirtualListDebugInfo) {
        // Track scroll position
        if (info.atBottom) {
            console.log('User reached the bottom')
        }

        // Monitor performance
        console.log(`Rendering ${info.visibleItemsCount} of ${info.totalItems} items`)
    }
</script>

<VirtualList
    {items}
    debug={true}
    debugFunction={onDebug}
>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>