VirtualizedMessageListContext

The context value is provided by VirtualizedMessageListContextProvider, which wraps the content rendered by VirtualizedMessageList. It exposes API used by default and custom components. Components that can consume VirtualizedMessageListContext include:

• EmptyStateIndicator - rendered when there are no messages in the channel. The component can be customized.
• LoadingIndicator - rendered while loading more messages to the channel. The component can be customized.
• MessageListNotifications - component rendering application notifications. The component can be customized.
• MessageNotification - component used to display a single notification message in MessageListNotifications. The component can be customized.
• TypingIndicator - component indicating that another user is typing a message in a given channel. The component can be customized.
• Message and its children - component that renders a message. The component can be customized.
• DateSeparator - component rendered to separate messages posted on different dates. The component can be customized.
• MessageSystem - component to display system messages in the message list. The component can be customized.
• HeaderComponent - component to be displayed before the oldest message in the message list. The component can be customized.
• UnreadMessagesNotification - custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. The component can be customized.
• UnreadMessagesSeparator - component to be displayed before the oldest message in the message list. The component can be customized.

Best Practices

• Use context helpers instead of directly manipulating virtualized DOM.
• Keep custom components compatible with virtualization constraints.
• Prefer lightweight notifications to avoid virtualized list jitter.
• Use scrollToBottom for UX flows like “new messages” buttons.
• Avoid measuring DOM nodes in list items when possible.

Basic Usage

Pull the value from context with our custom hook:

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

export const CustomComponent = () => {
  const { scrollToBottom } = useVirtualizedMessageListContext();
  // component logic ...
  return {
    /* rendered elements */
  };
};

Values

scrollToBottom

Scrolls the list to the bottom.