MessageListContext

The context value is provided by MessageListContextProvider which wraps the contents rendered by MessageList. It exposes API that the default and custom components rendered by MessageList 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 { useMessageListContext } from 'stream-chat-react';

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

Value

listElement

The scroll container within which the messages and typing indicator are rendered. You may want to perform scroll-to-bottom operations based on the listElement’s scroll state.

scrollToBottom

Function that scrolls the listElement to the bottom.