Avatar

An image element with a fallback for representing the user.

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const { Avatar, AvatarImage, AvatarFallback } = VM.require(
  "uiisnear.near/widget/avatar"
);
 
if (Tailwind === undefined) return <></>;

<Tailwind>
  <Avatar>
    <AvatarImage
      src="https://pages.near.org/wp-content/uploads/2023/11/NEAR_token.png"
      alt="@uiisnear"
    />
    <AvatarFallback>UI</AvatarFallback>
  </Avatar>
</Tailwind>

API Reference

AvatarImage

The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange handler if you need more control.

AvatarFallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections. For more control, use the onLoadingStatusChange handler on Avatar.Image.

Classnames

Classnames available to customize the component.

Examples

Big Avatar

With Colored Ring