VirtualizedMessageListContext

VirtualizedMessageListContext gives the components inside a VirtualizedMessageList one function: scroll to the latest message. Read it with useVirtualizedMessageListContext(). Message list UI explains the list itself.

Best practices

• Call useVirtualizedMessageListContext() only in a component that VirtualizedMessageList renders. It throws anywhere else, including inside MessageList.
• Scroll with scrollToBottom() rather than through the DOM. The list renders only the messages near the visible area, so most messages have no DOM node to scroll to.

Basic usage

The NewMessageNotification override renders inside the list. This one is a button that takes the user to the latest message:

import {
  useVirtualizedMessageListContext,
  VirtualizedMessageList,
  WithComponents,
} from "stream-chat-react";
import type { NewMessageNotificationProps } from "stream-chat-react";

const JumpToLatest = ({
  newMessageCount,
  showNotification,
}: NewMessageNotificationProps) => {
  const { scrollToBottom } = useVirtualizedMessageListContext();

  if (!showNotification) return null;

  return (
    <button className="jump-to-latest" onClick={scrollToBottom} type="button">
      {newMessageCount ? `${newMessageCount} new messages` : "New messages"}
    </button>
  );
};

const overrides = { NewMessageNotification: JumpToLatest };

export const LivestreamMessages = () => (
  <WithComponents overrides={overrides}>
    <VirtualizedMessageList />
  </WithComponents>
);

Values

Related hooks

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