Info:
This is release candidate documentation for Stream Chat React SDK v15. For the latest stable version, see the latest version (v14).

MessageListContext

MessageListContext gives the components inside a MessageList the list's processed messages, its scroll container and a way to scroll it to the bottom. Read it with useMessageListContext(). Message list UI explains the list itself.

Best practices

  • Call useMessageListContext() only in a component that MessageList renders. It throws anywhere else, including inside VirtualizedMessageList, which has its own context.
  • A component meant for both lists, such as a custom MessageUI, shouldn't call either context hook.
  • Use processedMessages when you need the list as it renders, with date separators and the header among the messages. For the messages alone, read the paginator's items.
  • Use scrollToBottom() rather than scrolling listElement yourself, so the list's own scroll handling stays in step.

Basic usage

A custom HeaderComponent renders inside the list, so it can read the context. This one counts the loaded messages:

import {
  isDateSeparatorMessage,
  isIntroMessage,
  MessageList,
  useMessageListContext,
  WithComponents,
} from "stream-chat-react";

const LoadedCount = () => {
  const { processedMessages } = useMessageListContext();
  const count = processedMessages.filter(
    (item) => !isDateSeparatorMessage(item) && !isIntroMessage(item),
  ).length;

  return <p className="loaded-count">{count} messages loaded</p>;
};

const overrides = { HeaderComponent: LoadedCount };

export const MessagesWithCount = () => (
  <WithComponents overrides={overrides}>
    <MessageList />
  </WithComponents>
);

Components that commonly consume MessageListContext

No SDK component reads this context. It's there for the overrides MessageList renders, which sit inside it:

  • HeaderComponent, EmptyStateIndicator and LoadingIndicator;
  • the items: MessageUI and the parts of a message, DateSeparator, MessageSystem, UnreadMessagesSeparator, ThreadHead, MessageListWrapper and MessageListItem;
  • the floating parts: TypingIndicator, NewMessageNotification and UnreadMessagesNotification.

MessageListMainPanel and the NotificationList sit outside it.

Values

Value Type Description
listElement HTMLElement | null The scroll container that holds the messages and the typing indicator. null until it mounts.
processedMessages RenderedMessage[] The items the list renders: the messages with the date separators and the header added, after hideDeletedMessages and reviewProcessedMessage.
scrollToBottom () => void Scrolls the container to the bottom. It does nothing while the list shows an older interval of messages, or with suppressAutoscroll. To get to the latest messages from an older interval, call MessagePaginator.jumpToTheLatestMessage().

Related hooks

  • useMessageListContext() returns the values above, and throws outside MessageList.
  • useVirtualizedMessageListContext() is the counterpart for VirtualizedMessageList.