Interface: Components<Data, Context>
Customize the Virtuoso rendering by passing a set of custom components.
Type parameters
| Name | Type |
|---|---|
Data | unknown |
Context | unknown |
Properties
EmptyPlaceholder
• Optional EmptyPlaceholder: ComponentType<{ context?: Context }>
Set to render a custom UI when the list is empty.
Defined in
dist/index.d.ts:73
Footer
• Optional Footer: ComponentType<{ context?: Context }>
Set to render a component at the bottom of the list.
Defined in
dist/index.d.ts:35
Group
• Optional Group: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {}, "style" | "children"> & { data-index: number ; data-item-index: number ; data-known-size: number } & { context?: Context }>
Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a div.
Defined in
dist/index.d.ts:47
Header
• Optional Header: ComponentType<{ context?: Context }>
Set to render a component at the top of the list.
The header remains above the top items and does not remain sticky.
Defined in
dist/index.d.ts:29
Item
• Optional Item: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {}, "style" | "children"> & { data-index: number ; data-item-group-index?: number ; data-item-index: number ; data-known-size: number ; item: Data } & { context?: Context }>
Set to customize the item wrapping element. Use only if you would like to render list from elements different than a div.
Defined in
dist/index.d.ts:41
List
• Optional List: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {}, "ref" | "style" | "children"> & { data-test-id: string } & { context?: Context }>
Set to customize the items wrapper. Use only if you would like to render list from elements different than a div.
Defined in
dist/index.d.ts:67
ScrollSeekPlaceholder
• Optional ScrollSeekPlaceholder: ComponentType<ScrollSeekPlaceholderProps & { context?: Context }>
Set to render an item placeholder when the user scrolls fast. See the scrollSeek property for more details.
Defined in
dist/index.d.ts:79
Scroller
• Optional Scroller: ComponentType<Pick<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {}, "ref" | "style" | "tabIndex" | "children"> & { data-test-id?: string ; data-virtuoso-scroller?: boolean } & { context?: 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.
Defined in
dist/index.d.ts:61
TopItemList
• Optional TopItemList: ComponentType<TopItemListProps & { context?: 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.
Defined in
dist/index.d.ts:54