Avatar

The Avatar component displays an image, with fallback to the first letter of the optional name prop.

Basic Usage

A typical use case for the Avatar component would be to import and use in your custom components that will completely override a header component, preview component, or similar.

Here's an example of using the Avatar component within a custom preview component:

import { Avatar } from 'stream-chat-react';

const YourCustomChannelPreview = (props) => {
  return (
    <div>
      <Avatar name={props.displayTitle} image={props.displayImage} />
      <div> Other channel info needed in the preview </div>
    </div>
  );
};

<ChannelList Preview={YourCustomChannelPreview} />;

UI Customization

You can also take advantage of the Avatar prop on the ChannelHeader and ChannelList components to override just that aspect of these components specifically, see the example below.

An example of overriding just the Avatar component in the default ChannelPreviewMessenger component.

const CustomAvatar = (props) => {
  return <Avatar image={props.image} />;
};

<ChannelList Preview={(props) => <ChannelPreviewMessenger {...props} Avatar={CustomAvatar} />} />;

Props

className

Custom class that will be merged with the default class.

Type
string | undefined

image

The image URL. If the image fails to load the default is an image of the first initial of the name if there is one.

Type	Default
string | null	first initial of the name

name

Used to extract a first letter to create the image fallback.

Type
string | null

onClick

The click event handler applied to the root div of the component.

Type
(event: React.BaseSyntheticEvent) => void

onMouseOver

The mouseOver event handler applied to the root div of the component.

Type
(event: React.BaseSyntheticEvent) => void

user

The entire user object for the chat user represented by the Avatar component. This props is not used by the default Avatar component.

Type
Object