ComponentContext

ComponentContext holds the override keys: for each replaceable part of the UI, the component to render instead of the SDK's. Set keys with WithComponents, and read them with useComponentContext(). Overriding components explains how overrides apply and lists the keys by area of the screen. This page lists what each key's component receives and what renders by default.

Best practices

• Declare the overrides object once, at module scope or with useMemo. A new object on every render re-renders every component that reads the context, each message included.
• Put WithComponents above the component that reads the key. Chat reads NotificationAnnouncer, so that key only works from a WithComponents around Chat.
• Use WithComponents, which merges with the overrides above it. ComponentProvider replaces them all, so use it only to reset a subtree to the defaults.
• A custom MessageUI or VirtualMessage receives no props. It reads the message with useMessageContext(). See A custom MessageUI.
• Before rebuilding a part, check whether the default takes what you need. For example, to change the message actions, render MessageActions with your own messageActionSet, as Message actions shows.

Basic usage

The SDK reads a key and falls back to its own component. A component of yours can do the same, so it shows whatever the app registered:

import {
  LoadingIndicator as DefaultLoadingIndicator,
  useComponentContext,
} from "stream-chat-react";

export const MembersLoading = () => {
  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();

  return <LoadingIndicator />;
};

useComponentContext() returns {} outside every provider. It never throws.

Registering overrides with WithComponents

WithComponents merges its overrides into the context from above. A nested one adds its keys and keeps the rest:

import type {
  Channel as StreamChannel,
  Thread as StreamThread,
} from "stream-chat";
import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
  Thread,
  ThreadHeader,
  WithComponents,
} from "stream-chat-react";
import type { DateSeparatorProps } from "stream-chat-react";

// The list finds date separators by the class and reads their dates from `data-date`.
const DayOnlySeparator = ({ date, floating }: DateSeparatorProps) => (
  <div
    className={`str-chat__date-separator${floating ? " str-chat__date-separator--floating" : ""}`}
    data-date={date.toISOString()}
  >
    {date.toLocaleDateString()}
  </div>
);

const ClosedReplies = () => (
  <div className="closed-replies">Replies are closed.</div>
);

const appOverrides = { DateSeparator: DayOnlySeparator };
const threadOverrides = { MessageComposerUI: ClosedReplies };

type ConversationProps = {
  channel: StreamChannel;
  thread?: StreamThread;
};

export const Conversation = ({ channel, thread }: ConversationProps) => (
  <WithComponents overrides={appOverrides}>
    <Channel channel={channel}>
      <ChannelHeader />
      <MessageList />
      <MessageComposer />
    </Channel>
    {thread && (
      <WithComponents overrides={threadOverrides}>
        <Thread thread={thread}>
          <ThreadHeader />
          <MessageList />
          <MessageComposer />
        </Thread>
      </WithComponents>
    )}
  </WithComponents>
);

Both message lists render DayOnlySeparator. Only the thread's composer renders ClosedReplies. The icons key merges icon by icon, so a nested WithComponents that sets one icon keeps the icons set above it.

Current override keys

"none" in the props column means the component receives no props: it reads what it needs from context. Apart from MessageUI and VirtualMessage, those keys are typed React.ComponentType without props, so an override whose props are required doesn't compile. Where the default takes props of its own, the SDK still passes none: an override that renders the default can pass them, as in MessageStatus: () => <MessageStatus MessageReadStatus={ReadIcon} />. A default marked "built in" is a component the SDK doesn't export.

Choosing between props and context

Use a key for a part the SDK renders, and a prop or your own children for a part you render yourself:

• Components you render, such as ChannelHeader, ThreadHeader, MessageList and MessageComposer, have no key. Pass them props, or render something else in their place. ChannelHeader's StartContent, EndContent, Title, Subtitle and Avatar are props for this reason. The header in Channel UI shows which part each one replaces.
• Parts the SDK renders, such as a message, the date separators or the notification list, have a key. Set it with WithComponents around the subtree that should use it.
• Some components take a prop and read a key for the same part. The prop wins for that one instance. Gallery renders its GalleryUI prop, else the GalleryUI key, else the default. Attachment takes Image, Giphy, File and other props for the parts it renders, while the Attachment key replaces Attachment itself.

Channel and Thread render only their children, so their content is yours to compose. See Composition.

Related hooks

• useComponentContext() returns the overrides in effect, or {} outside every provider.
• useComponentContextIcons() returns every icon, with the icons overrides merged over the SDK's own. See Icons.