Avatar with Channel Detail

AvatarWithChannelDetail is a drop-in ChannelAvatar variant that opens ChannelDetail in a modal when clicked. It is the quickest way to wire channel details into an existing UI: render it where you currently render the channel avatar (typically the ChannelHeader), and the detail surface comes along for free.

Unlike ChannelDetail, this component reads the active channel from ChannelStateContext, so it must be rendered inside a Channel.

Installation

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

import "stream-chat-react/css/v2/index.css";
import "stream-chat-react/dist/css/channel-detail.css";

Wire it into the channel header

Render AvatarWithChannelDetail wherever you render the channel avatar — typically the ChannelHeader — and the detail modal comes along for free.

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

const App = () => (
  // Must be inside <Channel>: the component reads the active channel from
  // ChannelStateContext (unlike ChannelDetail, which takes `channel` directly).
  <Channel>
    <Window>
      {/* Drop-in replacement for the header avatar — no modal wiring needed.
          The component manages open/close state and the accessibility labels
          (aria-label "Open channel details", modal label "Channel details"). */}
      <ChannelHeader Avatar={AvatarWithChannelDetail} />
      {/* ... */}
    </Window>
  </Channel>
);

Clicking the avatar opens ChannelDetail for the active channel inside a modal.

UI Customization

Provide a custom avatar visual

Pass an Avatar component to control how the avatar itself renders while keeping the click-to-open behavior:

<AvatarWithChannelDetail Avatar={MyChannelAvatar} />

Customize the detail surface

Pass a custom ChannelDetail to adjust what opens in the modal — for example a preconfigured ChannelDetail with your own sections:

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

// Override `ChannelDetail` to adjust what opens in the modal (here, custom
// sections) instead of re-implementing the modal yourself.
const ChannelDetailWithCustomSections = (props) => (
  <ChannelDetail {...props} sections={mySections} />
);

<AvatarWithChannelDetail ChannelDetail={ChannelDetailWithCustomSections} />;

Props

AvatarWithChannelDetail accepts all ChannelAvatar props (forwarded to the rendered avatar), plus the following.

NameDescriptionTypeDefault
AvatarComponent used to render the avatar visual. Falls back to the ComponentContext Avatar (unless that is this component), then to the default ChannelAvatar.React.ComponentType<ChannelAvatarProps>ChannelAvatar
ChannelDetailComponent rendered inside the modal. Receives the active channel.React.ComponentType<ChannelDetailProps>ChannelDetail
classNameClass name applied to the avatar visual.string-

The modal open/close state is managed internally. The component uses the Modal from ComponentContext (defaulting to the SDK GlobalModal), so the default works out of the box — you only need to register a custom Modal via WithComponents if you want a different dialog shell, and that override applies here too.

Previous
Channel Detail
Next
Section Navigator