Chat

The Chat component wraps your app and provides ChatContext, including the StreamChat client. All other SDK components must be nested under Chat.

Best Practices

• Render Chat once at the app root so a single client instance is shared.
• Create and connect the client outside render loops to avoid reconnect churn.
• Keep customClasses minimal and include required default classes when overriding.
• Set i18nInstance up front to avoid flashing between languages.
• Use theme or CSS variables before resorting to heavy class overrides.

Basic Usage

Chat doesn’t render UI by itself. Once you have a StreamChat client, pass it as the client prop to make it available via context.

<Chat client={client}>
  <Channel channel={channel}>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>

Any child of Chat can access ChatContext via the useChatContext hook.

const { client } = useChatContext();

Props

client

The StreamChat client instance. Use it to call stream-chat-js methods.

const channel = client.channel("messaging", {
  members: ["nate", "roy"],
});

customClasses

Custom CSS class names that replace the library’s default container classes. Use this to remove or override the built-in wrapper classes.

In the below example we will replace two of the default container classes, str-chat (maps to the chat key) and str-chat-channel (maps to the channel) key. Once replaced, add whatever styles you want in your own stylesheets.

const customClasses: CustomClasses = {
  chat: "custom-chat-class",
  channel: "custom-channel-class",
};

const App = () => (
  <Chat client={client} customClasses={customClasses}>
    <ChannelList />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);

Accepted keys and the default classes they override:

• chat - str-chat
• chatContainer - str-chat__container
• channel - str-chat-channel
• channelList - str-chat-channel-list
• message - str-chat__li str-chat__li--${groupStyles}
• messageList - str-chat__list
• thread - str-chat__thread
• threadList - str-chat__list--thread
• virtualMessage - str-chat__virtual-list-message-wrapper
• virtualizedMessageList - str-chat__virtual-list

defaultLanguage

Default fallback language for UI translations. Defaults to en.

i18nInstance

Streami18n translation instance. Use it to change the default language or override strings.

const i18nInstance = new Streami18n({
  language: "es",
  translationsForLanguage: {
    "Nothing yet...": "Nada",
  },
});

<Chat client={client} i18nInstance={i18nInstance}>
  {/* children of Chat component */}
</Chat>;

initialNavOpen

Controls whether str-chat-channel-list--open is applied to the ChannelList root element. You provide the CSS that uses this class to manage layout, for example:

@media screen and (min-width: 768px) {
  .str-chat-channel-list--open {
    width: 100%;
  }

  .str-chat-channel-list {
    position: fixed;
    z-index: 1;
    width: 0;
  }
}

In this example, the list takes the full width on small screens when the class is present; otherwise it’s hidden.

theme

Adds className(s) to the Channel and ChannelList components.

useImageFlagEmojisOnWindows

Windows 10 renders country flag emojis as characters by default. Set this to true to load a custom web font and render flags as images.

isMessageAIGenerated

A callback that determines whether a message was AI-generated. Defaults to () => false.