Skip to content
Virtuoso
React Virtuoso in Github

Virtuoso Message List Hooks

Hooks

Section titled “Hooks”

You can access the message list’s internal state and methods by calling hooks inside the inner components. The message list component exposes the following hooks:

  • useVirtuosoMethods - the equivalent of the ref prop, which gives you access to the message list methods.
  • useVirtuosoLocation - gives you access to the current ListScrollLocation.
  • useCurrentlyRenderedData - gives you access to the currently rendered data items. Useful if you want to display information for the first or last rendered item.

ListScrollLocation includes these values:

  • listOffset - the distance between the list top and viewport top.
  • visibleListHeight - the visible list height without headers and footers.
  • scrollHeight - the scroll element’s total height.
  • bottomOffset - the distance from the scroll element bottom to the viewport bottom.
  • isAtBottom - whether the list is at the bottom or currently scrolling there.
  • lastVisibleItemIndex - the index of the bottom-most visible item.
  • lastItemBottomOffset - the distance from that item’s bottom edge to the viewport bottom.

lastVisibleItemIndex and lastItemBottomOffset are available in @virtuoso.dev/message-list 1.16.0 and later. Together, they can restore a previous bottom-relative location or implement diagnostics and unseen-message behavior without inspecting the DOM.

The useVirtuosoMethods hook exposes several data operations. To make it type-safe, you should pass the type of data and the context you’re using in the message list as a type parameters.

// For a message list with items of type { message: string } and context of type { user: string }
const methods = useVirtuosoMethods<{ message: string }, { user: string }>()

Both hooks are used in the tutorial to implement the scroll to bottom button.