# ChannelHeader

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

`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](https://getstream.io/chat/docs/sdk/react/v15/ui/components/channel-ui/#the-header) 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

```tsx
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](https://getstream.io/chat/docs/sdk/react/v15/ui/layout/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:

```tsx
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](https://getstream.io/chat/docs/sdk/react/v15/ui/components/channel-ui/#channel-details).

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

```tsx
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](https://getstream.io/chat/docs/sdk/react/v15/recipes/headers/channel-header/) builds a complete header.

## Props

| Prop           | Type                                | Default                          | Description                                                                                                                             |
| -------------- | ----------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `Avatar`       | `ComponentType<ChannelAvatarProps>` | `ChannelAvatar`                  | Renders the avatar. It receives `displayMembers`, `imageUrl`, `userName`, `size="lg"` and the class `str-chat__avatar--channel-header`. |
| `EndContent`   | `ComponentType`                     | `WorkspaceNavigationCloseButton` | Rendered at the end, after the avatar. A component you pass replaces the close button.                                                  |
| `image`        | `string`                            | the channel's display image      | Replaces the image the avatar shows.                                                                                                    |
| `StartContent` | `ComponentType`                     | `WorkspaceNavigationBackButton`  | Rendered at the start. A component you pass replaces the back button.                                                                   |
| `title`        | `string`                            | the channel's display title      | Replaces the title. The avatar's `userName` is the title too.                                                                           |

## Related hooks

| Hook                                 | Returns                                                                                        |
| ------------------------------------ | ---------------------------------------------------------------------------------------------- |
| `useChannel()`                       | the channel the header shows                                                                   |
| `useChannelPreviewInfo({ channel })` | `displayTitle`, `displayImage` and `groupChannelDisplayInfo`, the members a group avatar shows |
| `useMessageComposerController()`     | the composer whose text composer state holds who's typing                                      |

The typing data is explained in [Typing indicator](https://getstream.io/chat/docs/sdk/react/v15/ui/components/channel-ui/#typing-indicator), and the channel hooks are on [Channel and thread hooks](https://getstream.io/chat/docs/sdk/react/v15/reference/hooks/channel-and-thread-hooks/).

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel/channelheader/](https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel/channelheader/).