Skip to main content

Avatar

The Avatar component is a simple and convenient way to display a user's profile picture. It can automatically generate a unique avatar based on the user's Decentralized Identifier (DID) or display an image from a specified URL.

This component is a direct re-export from the @arcblock/ux library, ensuring a consistent look and feel across ArcBlock's ecosystem.

Import

You can import the Avatar component from the library as follows:

javascript
import Avatar from '@arcblock/did-connect-react/lib/Avatar';

Usage

The most common use case is to display the avatar of the currently logged-in user. You can get the user's information from the useSession hook and pass their DID to the Avatar component.

User Profile Example

jsx
import React from 'react';
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import { useSession } from '@arcblock/did-connect-react';

export default function UserProfile() {
  const { session } = useSession();

  if (!session.user) {
    return <div>Loading user...</div>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={64} did={session.user.did} />
      <h3>{session.user.fullName || 'Anonymous User'}</h3>
    </div>
  );
}

Props

The Avatar component forwards all its props to the underlying component from @arcblock/ux. Below are some of the most commonly used props:

  • did string — The user's DID. If provided, a unique, block-based avatar will be generated. This is the preferred method for displaying avatars for DID users.
  • src string — The URL of a specific image to display. If both src and did are provided, src will take precedence.
  • size number (default: 40) — The size (width and height) of the avatar in pixels.
  • shape 'circle' | 'square' (default: 'circle') — Defines the shape of the avatar. Can be either circle or square.
  • variant string (default: 'beam') — The algorithm used to generate the avatar from the DID. Common values include beam, pixel, ring, etc.
  • ...rest any — Any other standard HTML attributes like className or style can be passed to the root div element of the component.

After displaying the user's avatar, you might also want to show their DID address. Proceed to the next section to learn about the Address component.