Interface: Components<Context>

"interfaces".Components

Customize the Virtuoso rendering by passing a set of custom components.

Type parameters

NameDefault
Contextunknown

Hierarchy

  • Components

Properties

EmptyPlaceholder

• Optional EmptyPlaceholder: ComponentType<{ context?: Context }>

Defined in src/interfaces.ts:129

Set to render a custom UI when the list is empty.

Footer

• Optional Footer: ComponentType<{ context?: Context }>

Defined in src/interfaces.ts:99

Set to render a component at the bottom of the list.

Group

• Optional Group: ComponentType<GroupProps & { context?: Context }>

Defined in src/interfaces.ts:107

Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a div.

Header

• Optional Header: ComponentType<{ context?: Context }>

Defined in src/interfaces.ts:95

Set to render a component at the top of the list.

The header remains above the top items and does not remain sticky.

Item

• Optional Item: ComponentType<ItemProps & { context?: Context }>

Defined in src/interfaces.ts:103

Set to customize the item wrapping element. Use only if you would like to render list from elements different than a div.

List

• Optional List: ComponentType<ListProps & { context?: Context }>

Defined in src/interfaces.ts:124

Set to customize the items wrapper. Use only if you would like to render list from elements different than a div.

ScrollSeekPlaceholder

• Optional ScrollSeekPlaceholder: ComponentType<ScrollSeekPlaceholderProps & { context?: Context }>

Defined in src/interfaces.ts:134

Set to render an item placeholder when the user scrolls fast. See the scrollSeek property for more details.

Scroller

• Optional Scroller: ComponentType<ScrollerProps & { context?: Context }>

Defined in src/interfaces.ts:119

Set to customize the outermost scrollable element. This should not be necessary in general, as the component passes its HTML attribute props to it.

TopItemList

• Optional TopItemList: ComponentType<TopItemListProps & { context?: Context }>

Defined in src/interfaces.ts:113

Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a div or you want to set a custom z-index for the sticky position.

Edit this page