# Avatar with Channel Detail

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

`AvatarWithChannelDetail` renders the channel avatar as a button that opens [`ChannelDetail`](https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel-detail/channel-detail/) in a modal. It's how an app usually turns channel details on: pass it to `ChannelHeader` as its avatar. [Channel details and members](https://getstream.io/chat/docs/sdk/react/v15/features/channels/channel-details-and-members/#turning-it-on-or-off) covers the feature.

It reads the channel with `useChannel()`, so render it inside a `Channel`.

## Installation

```tsx
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](https://getstream.io/chat/docs/sdk/react/v15/reference/entry-points-and-css-files/#css-files).

## Wire it into the channel header

```tsx
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`:

```tsx
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](https://getstream.io/chat/docs/sdk/react/v15/features/channels/channel-details-and-members/#choosing-the-sections).

To change the modal itself, register your own `Modal` with `WithComponents`. It gets `open`, `onClose`, `aria-label` and `dialogRootProps`; see [Modal](https://getstream.io/chat/docs/sdk/react/v15/component-reference/utilities/modal/).

## Props

`AvatarWithChannelDetail` takes the [`ChannelAvatar` props](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/avatar/#channelavatar) and passes them to the avatar, plus these:

| Prop            | Type                                      | Default                                     | Description                                                                       |
| --------------- | ----------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------- |
| `Avatar`        | `React.ComponentType<ChannelAvatarProps>` | the `Avatar` override, else `ChannelAvatar` | The picture inside the button.                                                    |
| `ChannelDetail` | `React.ComponentType<ChannelDetailProps>` | `ChannelDetail`                             | What opens in the modal. It gets the channel in context as `channel`.             |
| `className`     | `string`                                  | none                                        | Added to the avatar, after `str-chat__avatar-with-channel-detail-button__avatar`. |
| `size`          | `ChannelAvatarProps['size']`              | required                                    | The avatar's size. `ChannelHeader` passes `"lg"`.                                 |

## Related hooks

| Hook                        | Returns                                       |
| --------------------------- | --------------------------------------------- |
| `useChannel()`              | the channel in context, which the panel shows |
| `useChannelDetailContext()` | inside the panel, `{ channel }`               |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel-detail/avatar-with-channel-detail/](https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel-detail/avatar-with-channel-detail/).