Props

All available props for the SvelteVirtualList component.

Required Props

items

The array of items to render.

items: TItem[]

items: TItem[]

renderItem

A Svelte snippet that defines how each item is rendered.

{#snippet renderItem(item, index)}
    <div>{item.text}</div>
{/snippet}

{#snippet renderItem(item, index)}
    <div>{item.text}</div>
{/snippet}

Optional Props

bufferSize

Number of items to render outside the visible viewport for smooth scrolling.

bufferSize?: number
// Default: 20

bufferSize?: number
// Default: 20

defaultEstimatedItemHeight

Initial height estimate (in pixels) for items before measurement.

defaultEstimatedItemHeight?: number
// Default: 40

defaultEstimatedItemHeight?: number
// Default: 40

Infinite Scroll Props

onLoadMore

Callback triggered when scrolling near the end of the list.

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

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

loadMoreThreshold

Number of items from the end to trigger onLoadMore.

loadMoreThreshold?: number
// Default: 20

loadMoreThreshold?: number
// Default: 20

hasMore

Set to false when all data has been loaded.

hasMore?: boolean
// Default: true

hasMore?: boolean
// Default: true

Styling Props

containerClass

CSS class for the outer container element.

containerClass?: string

containerClass?: string

viewportClass

CSS class for the scrollable viewport element.

viewportClass?: string

viewportClass?: string

contentClass

CSS class for the content wrapper element.

contentClass?: string

contentClass?: string

itemsClass

CSS class for the items wrapper element.

itemsClass?: string

itemsClass?: string

Debug Props

debug

Enable debug mode with visual overlay.

debug?: boolean
// Default: false

debug?: boolean
// Default: false

debugFunction

Custom callback to receive debug information.

debugFunction?: (info: SvelteVirtualListDebugInfo) => void

debugFunction?: (info: SvelteVirtualListDebugInfo) => void

Testing Props

testId

Base test ID for component elements.

testId?: string

testId?: string

When set, adds data-testid attributes:

• {testId}-container
• {testId}-viewport
• {testId}-content
• {testId}-items