Skip to main content

Avatar

The Avatar component displays a user's 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.

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

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

const YourCustomChannelPreview = (props) => {
return (
<Avatar name={name} shape='square' size={35} />;
<div> Other channel info needed in the preview </div>
)
};

<ChannelList
Preview={YourCustomChannelPreview}
/>

Example 2 - a basic example with rounded shape:

import { Avatar } from './Avatar';
const image = 'https://pbs.twimg.com/profile_images/897621870069112832/dFGq6aiE_400x400.jpg';
const name = 'roy';

<Avatar image={image} name={name} shape='rounded' size={35} />;

UI Customization

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

Example 3 - an example of overriding just the Avatar component in the default ChannelPreviewMessenger component.

const CustomAvatar = (props) => {
return <Avatar image={props.image} shape='square' size={50} />;
};

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

Props

image

The image URL or default is an image of the first initial of the name if there is one.

TypeDefault
string | nullfirst initial of the name

name

An optional name of the image, used for title tag fallback.

Type
string | null

onClick

The click event handler.

Type
(event: React.BaseSyntheticEvent) => void

onMouseOver

The mouseOver event handler.

Type
(event: React.BaseSyntheticEvent) => void

shape

The shape of the avatar image.

TypeDefault
'circle' | 'rounded' | 'square'circle

size

The size in pixels of the avatar image.

TypeDefault
number32px

user

The entire user object for the chat user displayed in the component.

Type
Object

Did you find this page helpful?