ChannelHeader

ChannelHeader shows the channel from useChannel(): its title, a subtitle with who's typing or who's online, and its avatar, between a back button and a close button. Channel UI explains each part.

Best practices

• Render it inside Channel, above the message list.
• Change it through its props. ChannelHeader has no override key: you render it yourself, so you can render something else instead.
• A component passed as StartContent or EndContent replaces the back or the close button. To keep the button, render it inside your component.
• For a different header altogether, write your own component. It reads the channel with useChannel(), and the title and image with useChannelPreviewInfo().

Basic usage

import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
} from "stream-chat-react";

export const ChannelPanel = () => (
  <Channel channel={channel}>
    <ChannelHeader />
    <MessageList />
    <MessageComposer />
  </Channel>
);

Default behavior

From start to end, the header renders:

1. StartContent, by default WorkspaceNavigationBackButton. It shows only while the channel is stacked over other content in its panel.
2. The title: the channel's name. A channel without one shows the other member's name in a direct message, and members' names in a group.
3. The subtitle: "Cleo is typing" while other users type in the channel, through TypingIndicatorHeader. Otherwise "Online" or "Offline" in a direct message, and "12 members · 3 online" in a group, where online counts the channel's watchers. Typing shows only while typing events are on for the channel.
4. The avatar: ChannelAvatar with the channel image, or the members' avatars when the channel has no image.
5. EndContent, by default WorkspaceNavigationCloseButton. It shows only when the channel's panel can be closed.

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

UI customization

This header adds a menu button and keeps the back button, and opens channel details from the avatar:

import {
  ChannelHeader,
  WorkspaceNavigationBackButton,
} from "stream-chat-react";
import { AvatarWithChannelDetail } from "stream-chat-react/channel-detail";

const HeaderStart = () => (
  <>
    <WorkspaceNavigationBackButton />
    <button onClick={() => console.log("Open the menu")} type="button">
      Menu
    </button>
  </>
);

export const AppChannelHeader = () => (
  <ChannelHeader Avatar={AvatarWithChannelDetail} StartContent={HeaderStart} />
);

AvatarWithChannelDetail needs the channel-detail.css stylesheet; see Channel details.

A header of your own can reuse the parts of the default one:

import {
  ChannelAvatar,
  TypingIndicatorHeader,
  useChannel,
  useChannelPreviewInfo,
} from "stream-chat-react";

export const CompactChannelHeader = () => {
  const channel = useChannel();
  const { displayImage, displayTitle, groupChannelDisplayInfo } =
    useChannelPreviewInfo({ channel });

  return (
    <div className="compact-channel-header">
      <ChannelAvatar
        displayMembers={groupChannelDisplayInfo.members}
        imageUrl={displayImage}
        size="md"
        userName={displayTitle}
      />
      <strong>{displayTitle}</strong>
      <TypingIndicatorHeader />
    </div>
  );
};

TypingIndicatorHeader renders nothing while nobody is typing. The Channel header recipe builds a complete header.

Props

Related hooks

The typing data is explained in Typing indicator, and the channel hooks are on Channel and thread hooks.