Skip to main content

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.

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) => void

A callback that's invoked when the list is scrolled. See ListScrollLocation for the details of the parameter received.

Parameters​

location​

ListScrollLocation

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.

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