ChannelHeader

ChannelHeader displays the active channel’s image and title.

Best Practices

• Keep ChannelHeader lightweight; move heavy logic to parent components.
• Rely on channel name/image defaults unless you need explicit overrides.
• Use a custom header only when you need additional controls or layout changes.
• Ensure MenuIcon is accessible and indicates navigation state on mobile.
• Use the live indicator only for truly real-time channels.

Basic Usage

Render it under Channel. To override it, render your own header instead.

Example 1

<Channel channel={channel}>
  <ChannelHeader live={true} title={"General"} />
</Channel>

Example 2 - using a custom heading component.

<Channel channel={channel}>
  <YourCustomChannelHeader />
</Channel>

Props

Avatar

A custom UI component to display the avatar image.

image

The displayed image URL for the header, defaults to the channel image if there is one.

live

Shows a small live indicator below the title if the channel is live.

MenuIcon

A custom UI component to display menu icon.

title

A string to set the title manually, defaults to the channel name if there is one.