Svelte Virtual List logo

Props

All available props for the SvelteVirtualList component.

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

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

mode

Scroll direction mode.

ValueDescription
'topToBottom'Standard scrolling (default)
'bottomToTop'Chat-style, anchored at bottom
mode?: 'topToBottom' | 'bottomToTop'
// Default: 'topToBottom'
mode?: 'topToBottom' | 'bottomToTop'
// Default: 'topToBottom'

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