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.
No Inherit Doc
Extends
Type Parameters
• Data
• 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 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
) =>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 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.
start?
optional
start:number
Inherited from
ScrollerProps.start
accept?
optional
accept:string
Inherited from
ScrollerProps.accept
acceptCharset?
optional
acceptCharset:string
Inherited from
ScrollerProps.acceptCharset
action?
optional
action:string
Inherited from
ScrollerProps.action
allowFullScreen?
optional
allowFullScreen:boolean
Inherited from
ScrollerProps.allowFullScreen
allowTransparency?
optional
allowTransparency:boolean
Inherited from
ScrollerProps.allowTransparency
alt?
optional
alt:string
Inherited from
ScrollerProps.alt
as?
optional
as:string
Inherited from
ScrollerProps.as
async?
optional
async:boolean
Inherited from
ScrollerProps.async
autoComplete?
optional
autoComplete:string
Inherited from
ScrollerProps.autoComplete
autoPlay?
optional
autoPlay:boolean
Inherited from
ScrollerProps.autoPlay
capture?
optional
capture:boolean
|"user"
|"environment"
Inherited from
ScrollerProps.capture
cellPadding?
optional
cellPadding:string
|number
Inherited from
ScrollerProps.cellPadding
cellSpacing?
optional
cellSpacing:string
|number
Inherited from
ScrollerProps.cellSpacing
charSet?
optional
charSet:string
Inherited from
ScrollerProps.charSet
challenge?
optional
challenge:string
Inherited from
ScrollerProps.challenge
checked?
optional
checked:boolean
Inherited from
ScrollerProps.checked
cite?
optional
cite:string
Inherited from
ScrollerProps.cite
classID?
optional
classID:string
Inherited from
ScrollerProps.classID
cols?
optional
cols:number
Inherited from
ScrollerProps.cols
colSpan?
optional
colSpan:number
Inherited from
ScrollerProps.colSpan
controls?
optional
controls:boolean
Inherited from
ScrollerProps.controls
coords?
optional
coords:string
Inherited from
ScrollerProps.coords
crossOrigin?
optional
crossOrigin:CrossOrigin
Inherited from
ScrollerProps.crossOrigin
dateTime?
optional
dateTime:string
Inherited from
ScrollerProps.dateTime
default?
optional
default:boolean
Inherited from
ScrollerProps.default
defer?
optional
defer:boolean
Inherited from
ScrollerProps.defer
disabled?
optional
disabled:boolean
Inherited from
ScrollerProps.disabled
download?
optional
download:any
Inherited from
ScrollerProps.download
encType?
optional
encType:string
Inherited from
ScrollerProps.encType
form?
optional
form:string
Inherited from
ScrollerProps.form
formAction?
optional
formAction:string
Inherited from
ScrollerProps.formAction
formEncType?
optional
formEncType:string
Inherited from
ScrollerProps.formEncType