Avatar

The Avatar element is generally used to show the image and/or name of participants of a video call. If no image is provided/an error occurs loading the image, it will display a fallback image.

Of course, it can also be used in any other circumstances that you like, for example, in user lists, profiles, and much more.

General usage

The way you can use the Avatar element in a react component is like this:

import { Avatar } from '@stream-io/video-react-sdk';

export const MyAvatarExample = () => {
  return (
    <Avatar imageSrc="https://getstream.io/random_png/?id=stefan&name=stefan" />
  );
};

Props

imageSrc

Type
string | undefined

The URL of the user's profile image.

name

Type
string | undefined

The name of the user.

styles

Type
CSSProperties & Record<string, string \| number>

Custom CSS to attach to the avatar image/fallback.

Customization

If you want to build your own avatar component, you'll have to provide your own ParticipantViewUI component. For more information, visit the ParticipantView customizations guide.