VirtualizedMessageListContext

VirtualizedMessageListContext is provided by VirtualizedMessageListContextProvider, which wraps the content rendered by VirtualizedMessageList. It exposes the minimal list-level API that custom components rendered inside the virtualized list need — currently a scrollToBottom helper.

Best Practices

  • Use useVirtualizedMessageListContext for controls rendered inside a VirtualizedMessageList. For the standard MessageList, use useMessageListContext instead — the two lists provide different contexts.
  • Use scrollToBottom() for “jump to latest” style controls rendered inside the virtualized subtree.
  • Keep custom controls lightweight to avoid virtualization jitter.
  • Avoid assumptions about off-screen DOM nodes because virtualization unmounts them.

Basic Usage

import { useVirtualizedMessageListContext } from "stream-chat-react";

const CustomComponent = () => {
  const { scrollToBottom } = useVirtualizedMessageListContext();

  return <button onClick={scrollToBottom}>Jump to bottom</button>;
};

Values

Value Description Type
scrollToBottom Scrolls the current virtualized list to the bottom. () => void
Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.


Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React v14: <Your Question>