Skip to main content

Interface: Components<Data, Context>

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

Type Parameters​

• Data = unknown

• Context = unknown

Properties​

EmptyPlaceholder?​

optional EmptyPlaceholder: ComponentType<ContextProp<Context>>

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

optional Footer: ComponentType<ContextProp<Context>>

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

Group?​

optional Group: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children"> & object & ContextProp<Context>>

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

optional Header: ComponentType<ContextProp<Context>>

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<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children"> & object & ContextProp<Context>>

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<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children"> & RefAttributes<HTMLDivElement> & object & ContextProp<Context>>

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

Scroller?​

optional Scroller: ComponentType<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "tabIndex"> & RefAttributes<HTMLDivElement> & object & ContextProp<Context>>

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

ScrollSeekPlaceholder?​

optional ScrollSeekPlaceholder: ComponentType<ScrollSeekPlaceholderProps & ContextProp<Context>>

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

TopItemList?​

optional TopItemList: ComponentType<TopItemListProps & ContextProp<Context>>

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.