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:

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

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.

UI Components
Address