Avatar
The Avatar
component displays a user's image, with fallback to the first letter of the optional name prop.
#
Basic UsageA 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 CustomizationYou 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#
imageThe image URL or default is an image of the first initial of the name if there is one.
Type | Default |
---|---|
string | null | first initial of the name |
#
nameAn optional name of the image, used for title tag fallback.
Type |
---|
string | null |
#
onClickThe click event handler.
Type |
---|
(event: React.BaseSyntheticEvent) => void |
#
onMouseOverThe mouseOver event handler.
Type |
---|
(event: React.BaseSyntheticEvent) => void |
#
shapeThe shape of the avatar image.
Type | Default |
---|---|
'circle' | 'rounded' | 'square' | circle |
#
sizeThe size in pixels of the avatar image.
Type | Default |
---|---|
number | 32px |
#
userThe entire user object for the chat user displayed in the component.
Type |
---|
Object |