Interface: VirtuosoMessageListProps<Data, Context>
The properties accepted of the VirtuosoMessageList component.
In addition to the properties listed here, you can pass any other props that are accepted by a div element. They will be passed to the root div element used for the scroll.
Type parameters
| Name |
|---|
Data |
Context |
Hierarchy
-
↳
VirtuosoMessageListProps
Properties
initialData
• Optional initialData: Data[]
The initial data to display in the list.
Notice: this property does not accept updates after the initial mount of the component. If you need to update the data, use the imperative API of the component.
context
• Optional context: Context
Any additional state that you need to use in the ItemContent, Header, Footer, etc.
initialLocation
• Optional initialLocation: ItemLocation
The initial location to scroll to. It will be applied the first time the list is rendered with data. Using this property allows you to skip rendering of the items at the top of the list.
computeItemKey
• Optional computeItemKey: NoInfer<(params: { data: Data ; index: number ; context: Context }) => Key>
Computes the value for the React key prop for the item at the specified index. Use stable, unique keys to avoid rendering issues.
Param
The parameters to compute the key.
ItemContent
• Optional ItemContent: NoInfer<ItemContent<Data, Context>>
A React component that's used to render the individual item. See ItemContent for further details on the accepted props.
Header
• Optional Header: NoInfer<ContextAwareComponent<Context>>
An optional React component to render above the list items.
StickyHeader
• Optional StickyHeader: NoInfer<ContextAwareComponent<Context>>
An optional React component to render above the list items that remains visible at the top of the viewport when scrolling.
Footer
• Optional Footer: NoInfer<ContextAwareComponent<Context>>
An optional React component to render below the list items.
StickyFooter
• Optional StickyFooter: NoInfer<ContextAwareComponent<Context>>
An optional React component to render below the list items that remains visible at the bottom of the viewport when scrolling.
EmptyPlaceholder
• Optional EmptyPlaceholder: NoInfer<ContextAwareComponent<Context>>
An optional React component to render when the list has zero data items.
ScrollElement
• Optional ScrollElement: NoInfer<ScrollElementComponent<Context>>
An optional React component to replace the default scroller element. The default value is a div element.
onScroll
• Optional onScroll: (location: ListScrollLocation) => void
A callback that's invoked when the list is scrolled. See ListScrollLocation for the details of the parameter received.
Type declaration
▸ (location): void
Parameters
| Name | Type |
|---|---|
location | ListScrollLocation |
Returns
void
onRenderedDataChange
• Optional onRenderedDataChange: (range: Data[]) => void
A callback that's invoked when the currently visible items change
Type declaration
▸ (range): void
Parameters
| Name | Type |
|---|---|
range | Data[] |
Returns
void
HeaderWrapper
• Optional HeaderWrapper: HeaderWrapperComponent
Pass a custom component here if you need to adjust the z-index of the header container. The default value is div with zIndex: 1.
StickyHeaderWrapper
• Optional StickyHeaderWrapper: StickyHeaderWrapperComponent
Pass a custom component here if you need to adjust the z-index of the sticky header container. The default value is div with zIndex: 1.
FooterWrapper
• Optional FooterWrapper: FooterWrapperComponent
Pass a custom component here if you need to adjust the footer container. The default value is div element.
StickyFooterWrapper
• Optional StickyFooterWrapper: StickyHeaderWrapperComponent
Pass a custom component here if you need to adjust z-index the sticky footer container. The default value is div element with zIndex: 1.
shortSizeAlign
• Optional shortSizeAlign: ShortSizeAlign
Specifies the alignment of the items when the content of the list is smaller than the viewport height.
'top'(default), the items will be aligned to the top'bottom', the items will be aligned to the bottom.'bottom-smooth', the items will be aligned to the bottom and the scroll will be animated.