VirtualizedMessageListContext

The context value is provided by VirtualizedMessageListContextProvider which wraps the contents rendered by VirtualizedMessageList. It exposes API that the default and custom components rendered by VirtualizedMessageList can take advantage of. The components that can consume the context are:

• 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 to render 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.

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 */
  };
};

Value

scrollToBottom

Function that scrolls the list to the bottom.