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 |