MessageListContext

The context value is provided by MessageListContextProvider, which wraps the content rendered by MessageList. It exposes API used by default and custom components. Components that can consume MessageListContext 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 values instead of querying DOM elements directly.
• Keep custom components aligned with the default loading/empty states.
• Use listElement and scrollToBottom for custom scrolling UX.
• Avoid heavy logic inside list-level components to keep renders smooth.
• Treat notification components as transient UI and keep them lightweight.

Basic Usage

Pull the value from context with our custom hook:

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

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

Values

listElement

The scroll container that renders messages and the typing indicator. You can use it to implement custom scroll behavior.

scrollToBottom

Scrolls the listElement to the bottom.