Skip to main content

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

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.


Optional Header: NoInfer<ContextAwareComponent<Context>>

An optional React component to render above the list items.


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.


Optional Footer: NoInfer<ContextAwareComponent<Context>>

An optional React component to render below the list items.


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
NameType
locationListScrollLocation
Returns

void


onRenderedDataChange

Optional onRenderedDataChange: (range: Data[]) => void

A callback that's invoked when the currently visible items change

Type declaration

▸ (range): void

Parameters
NameType
rangeData[]
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.


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.