MessageListContext

MessageListContext is provided by MessageListContextProvider, which wraps the content rendered by MessageList.

Components rendered inside MessageList can use this context for list-level behaviors such as custom scrolling and access to processed list items.

Best Practices

• Use the context helpers instead of querying DOM nodes manually.
• Keep custom list-level UI lightweight so scrolling stays smooth.
• Use processedMessages when your custom component needs access to the enriched list rather than the raw channel messages.
• Prefer scrollToBottom() over direct DOM scroll manipulation.
• Keep notification UI separate from list-processing logic.

Basic Usage

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

const CustomComponent = () => {
  const { listElement, processedMessages, scrollToBottom } =
    useMessageListContext();

  return (
    <div>
      <button onClick={scrollToBottom}>Jump to bottom</button>
      <div>{processedMessages.length}</div>
      <div>{Boolean(listElement) ? "mounted" : "not mounted"}</div>
    </div>
  );
};

Components That Commonly Consume MessageListContext

• TypingIndicator
• custom list headers or footers
• custom controls that need to scroll to the bottom
• custom unread or notification UI rendered within the list subtree

Values