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
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 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
formMethod?
optional
formMethod:string
Inherited from
ScrollerProps.formMethod
formNoValidate?
optional
formNoValidate:boolean
Inherited from
ScrollerProps.formNoValidate
formTarget?
optional
formTarget:string
Inherited from
ScrollerProps.formTarget
frameBorder?
optional
frameBorder:string
|number
Inherited from
ScrollerProps.frameBorder
headers?
optional
headers:string
Inherited from
ScrollerProps.headers
height?
optional
height:string
|number
Inherited from
ScrollerProps.height
high?
optional
high:number
Inherited from
ScrollerProps.high
href?
optional
href:string
Inherited from
ScrollerProps.href
hrefLang?
optional
hrefLang:string
Inherited from
ScrollerProps.hrefLang
htmlFor?
optional
htmlFor:string
Inherited from
ScrollerProps.htmlFor
httpEquiv?
optional
httpEquiv:string
Inherited from
ScrollerProps.httpEquiv
integrity?
optional
integrity:string
Inherited from
ScrollerProps.integrity
keyParams?
optional
keyParams:string
Inherited from
ScrollerProps.keyParams
keyType?
optional
keyType:string
Inherited from
ScrollerProps.keyType
kind?
optional
kind:string
Inherited from
ScrollerProps.kind
label?
optional
label:string
Inherited from
ScrollerProps.label
list?
optional
list:string
Inherited from
ScrollerProps.list
loop?
optional
loop:boolean
Inherited from
ScrollerProps.loop
low?
optional
low:number
Inherited from
ScrollerProps.low
manifest?
optional
manifest:string
Inherited from
ScrollerProps.manifest
marginHeight?
optional
marginHeight:number
Inherited from
ScrollerProps.marginHeight
marginWidth?
optional
marginWidth:number
Inherited from
ScrollerProps.marginWidth
max?
optional
max:string
|number
Inherited from
ScrollerProps.max
maxLength?
optional
maxLength:number
Inherited from
ScrollerProps.maxLength
media?
optional
media:string
Inherited from
ScrollerProps.media
mediaGroup?
optional
mediaGroup:string
Inherited from
ScrollerProps.mediaGroup
method?
optional
method:string
Inherited from
ScrollerProps.method
min?
optional
min:string
|number
Inherited from
ScrollerProps.min
minLength?
optional
minLength:number
Inherited from
ScrollerProps.minLength
multiple?
optional
multiple:boolean
Inherited from
ScrollerProps.multiple
muted?
optional
muted:boolean
Inherited from
ScrollerProps.muted
name?
optional
name:string
Inherited from
ScrollerProps.name
noValidate?
optional
noValidate:boolean
Inherited from
ScrollerProps.noValidate
open?
optional
open:boolean
Inherited from
ScrollerProps.open
optimum?
optional
optimum:number
Inherited from
ScrollerProps.optimum
pattern?
optional
pattern:string
Inherited from
ScrollerProps.pattern
placeholder?
optional
placeholder:string
Inherited from
ScrollerProps.placeholder
playsInline?
optional
playsInline:boolean
Inherited from
ScrollerProps.playsInline
poster?
optional
poster:string
Inherited from
ScrollerProps.poster
preload?
optional
preload:string
Inherited from
ScrollerProps.preload
readOnly?
optional
readOnly:boolean
Inherited from
ScrollerProps.readOnly
required?
optional
required:boolean
Inherited from
ScrollerProps.required
reversed?
optional
reversed:boolean
Inherited from
ScrollerProps.reversed
rows?
optional
rows:number