Avatar with Channel Detail

<AvatarWithChannelDetail/> renders the channel avatar as a button that opens <ChannelDetail/> in a modal. It's how an app usually turns channel details on: pass it to <ChannelHeader/> as its avatar. Channel details and members covers the feature.

It reads the channel with useChannel(), so render it inside the channel's <Channel/> or <Thread/>, or in <ChannelInstanceProvider value={{ channel }}>.

Installation

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

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

channel-detail.css styles the panel. See Entry points and CSS files.

Wire it into the channel header

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

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

<ChannelHeader/> passes the avatar's props: the image, the members and the size. Clicking the avatar opens <ChannelDetail/> for the channel in context.

How it behaves:

• The button is disabled until the channel exists on the server: until a query's response was applied to it, or it was restored from the offline database. A channel created only locally has no details to load yet.
• The button's label is "Open channel details", and the modal's is "Channel details". Both are translation keys, under channelDetail.avatarChannelDetail.
• The modal is the Modal override, by default GlobalModal, with the class str-chat__channel-detail-modal on its root. The open and closed state is kept inside the component.

UI customization

A different avatar

Avatar replaces the picture inside the button. Without it, the component uses the Avatar override, unless that override is AvatarWithChannelDetail itself, and then ChannelAvatar:

import type { ChannelAvatarProps } from "stream-chat-react";
import { ChannelAvatar, ChannelHeader } from "stream-chat-react";
import { AvatarWithChannelDetail } from "stream-chat-react/channel-detail";
import type { AvatarWithChannelDetailProps } from "stream-chat-react/channel-detail";

const RingedChannelAvatar = (props: ChannelAvatarProps) => (
  <span className="ringed-avatar">
    <ChannelAvatar {...props} />
  </span>
);

const HeaderAvatar = (props: AvatarWithChannelDetailProps) => (
  <AvatarWithChannelDetail {...props} Avatar={RingedChannelAvatar} />
);

// Render inside a Channel.
export const RingedChannelHeader = () => (
  <ChannelHeader Avatar={HeaderAvatar} />
);

A different panel

The ChannelDetail prop replaces what opens in the modal. It receives the channel as channel. To change the sections, wrap the default panel, as in Choosing the sections.

To change the modal itself, register your own Modal with WithComponents. It gets open, onClose, aria-label and dialogRootProps; see Modal.

Props

<AvatarWithChannelDetail/> takes the <ChannelAvatar/> props and passes them to the avatar, plus these:

Related hooks