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 a 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

ChannelDetail 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