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?