Channel UI

An open channel is a panel with stacked components, such as a header, a message list and a composer. <Channel/> provides one channel to every component inside it, and you choose which components to render. Use this page to set up a channel view, change its header and show who is typing. Channel details are on Channel details UI. The props are in the Channel and ChannelHeader references.

This is the Design review channel. Its three parts, from top to bottom:

The Channel component

<Channel channel={channel}> binds a channel to its children:

<Channel/> doesn't load the channel. Pass a channel that's already watched, for example with Channel.watch(), as in Show one channel. With <ChatView/>, <ChannelSlot/> renders <Channel/> for the channel in its slot.

<ChannelPlaceholder/> renders the same container with no channel, for the space a channel fills while none is selected. Here is a ChannelPanel component that renders a channel, or the placeholder while none is selected:

import type { Channel as StreamChannel } from "stream-chat";
import {
  Channel,
  ChannelHeader,
  ChannelPlaceholder,
  MessageComposer,
  MessageList,
} from "stream-chat-react";

export const ChannelPanel = ({ channel }: { channel?: StreamChannel }) => {
  if (!channel) {
    return (
      <ChannelPlaceholder>Pick a channel to start chatting.</ChannelPlaceholder>
    );
  }

  return (
    <Channel channel={channel}>
      <ChannelHeader />
      <MessageList />
      <MessageComposer />
    </Channel>
  );
};

Providers and context hooks explains the contexts <Channel/> provides.

The header

<ChannelHeader/> shows the channel it gets from useChannel():

This is the header of a channel opened over another one in a panel that can be closed, so both its back and close buttons show. It has five areas, numbered from start to end. The table lists what each shows by default, and the <ChannelHeader/> prop that replaces it:

Both buttons come from the layout. Without one, neither renders. Moving between channels, threads and messages explains back and close.

A component passed as StartContent or EndContent replaces the button. To add something and keep the button, render the button yourself. Here is a ChannelHeaderWithCall component that adds a Call button before the close button:

import {
  ChannelHeader,
  useChannel,
  WorkspaceNavigationCloseButton,
} from "stream-chat-react";

const HeaderEnd = () => {
  const channel = useChannel();

  return (
    <>
      <button
        onClick={() => console.log("Start a call in", channel.cid)}
        type="button"
      >
        Call
      </button>
      <WorkspaceNavigationCloseButton />
    </>
  );
};

export const ChannelHeaderWithCall = () => (
  <ChannelHeader EndContent={HeaderEnd} />
);

Title and Subtitle replace the title and the subtitle and keep the rest of the header. Title receives the channel and displayTitle, the title the header would show, including a title you pass. Here is a ChannelHeaderWithTitleButton component whose title is a button:

import type { ChannelHeaderTitleProps } from "stream-chat-react";
import { ChannelHeader } from "stream-chat-react";

const TitleButton = ({ channel, displayTitle }: ChannelHeaderTitleProps) => (
  <button
    className="str-chat__channel-header__data__title"
    onClick={() => console.log("Show details of", channel.cid)}
    type="button"
  >
    {displayTitle}
  </button>
);

export const ChannelHeaderWithTitleButton = () => (
  <ChannelHeader Title={TitleButton} />
);

The str-chat__channel-header__data__title class keeps the title's look. The Channel details recipe uses such a title to open channel details.

A Subtitle component replaces the typing indicator too. To keep it, render <TypingIndicatorHeader/> in your subtitle, or render the default <ChannelHeaderSubtitle/> inside it. <TypingIndicatorHeader/> renders nothing while nobody is typing, so your subtitle shows its own text next to it. useChannelHeaderOnlineStatus() returns the default subtitle's text: "Online" or "Offline" in a direct message, and "12 members · 3 online" in a group.

Typing indicator

Two components show who is typing:

Both read channel.state.typing, which holds the latest typing event of each user in the channel. A typing event from a thread carries the thread's id, so the indicators can tell typing in the channel from typing in a thread. They leave out the current user, and keep showing for two seconds after typing stops, so they don't flicker.

What they show depends on where they're rendered:

They render nothing when typing events are turned off, with typingEvents.enabled under channel in client.config.

Typing indicators covers the feature end to end: sending typing events and building your own indicator.

Replacing parts

<Channel/> renders only its children, so you replace a part of the channel by rendering a different component in its place. A header of your own can retrieve the channel with useChannel(); see the Channel header recipe.

<ChannelHeader/> has no <WithComponents/> key. Change it through its props:

The typing indicator in the message lists is the one part on this page you replace through <WithComponents/>, with the TypingIndicator key.

The message list and the composer have keys of their own, listed on Message list UI and Message composer UI. Overriding components explains how overrides apply.

Used in

• Typing indicators
• Channel header