Interface: VirtuosoMessageListProps<Data, Context>
The properties accepted by 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.
Extends
Type Parameters
Data
Data
Context
Context
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 data
property.
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.
Notice: if you're using the data
prop, you should be using the scrollModifier
field for the positioning of the list after the data has been updated.
computeItemKey?
optional
computeItemKey:NoInfer
<(params
) =>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
) =>void
A callback that's invoked when the list is scrolled. See ListScrollLocation for the details of the parameter received.
Parameters
location
Returns
void
onRenderedDataChange()?
optional
onRenderedDataChange: (range
) =>void
A callback that's invoked when the currently visible items change
Parameters
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 the z-index of 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.
useWindowScroll?
optional
useWindowScroll:boolean
Set to true to make the list use the document scroller rather than wrapping in its own.
customScrollParent?
optional
customScrollParent:null
|HTMLElement
Pass an HTML element to use as the scroll element. This is useful when you want to include additional content in the scrollable area, or if you want to use a complex custom scroll component.
increaseViewportBy?
optional
increaseViewportBy:number
Artificially extends the viewport size in both directions, causing more items to be rendered.
Useful if you have relatively heavy items or want images to be loaded before the user scrolls to them.
For example, setting the value to 100
would increase the viewport in both directions by 100
pixels, causing the list to render more items.
data?
optional
data:null
|DataWithScrollModifier
<Data
>
The data to display, and the scroll action to perform when the data changes.
itemIdentity()?
optional
itemIdentity: (item
) =>unknown
Implement this if your data management logic replaces the data objects - it should return an item key, for example.
This is necessary for the data
prop updates to detect the prepending/appending changes correctly.
Parameters
item
Data
Returns
unknown