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.

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.

tsx

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