Skip to content
Info:
This is documentation for Stream Chat React SDK v12, which is no longer actively maintained. For up-to-date documentation, see the latest version (v14).

ChannelHeader

The ChannelHeader component displays pertinent information regarding the currently active channel, including image and title.

Basic Usage

Use this component by adding it as a child of the Channel component. If you want to 'override' this component, you simply use your custom component 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.

Type Default
component Avatar

image

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

Type Default
string the channel image

live

A boolean for showing a little indicator below the title if the channel is live right now.

Type
boolean

A custom UI component to display menu icon.

Type Default
component MenuIcon

title

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

Type Default
string the channel name