Avatar | ArcBlock

Avatarコンポーネントは、ユーザーのプロフィール画像を表示するためのシンプルで便利な方法です。ユーザーの分散型識別子（DID）に基づいてユニークなアバターを自動生成したり、指定されたURLから画像を表示したりできます。

このコンポーネントは@arcblock/uxライブラリから直接再エクスポートされており、ArcBlockエコシステム全体で一貫したルックアンドフィールを保証します。

インポート

Avatarコンポーネントは、次のようにライブラリからインポートできます。

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

使用方法

最も一般的な使用例は、現在ログインしているユーザーのアバターを表示することです。useSessionフックからユーザー情報を取得し、そのDIDをAvatarコンポーネントに渡すことができます。

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>
  );
}

プロパティ

Avatarコンポーネントは、すべてのプロパティを@arcblock/uxの基盤となるコンポーネントに転送します。以下は、最も一般的に使用されるプロパティの一部です。

did string — ユーザーのDID。提供された場合、ユニークなブロックベースのアバターが生成されます。これはDIDユーザーのアバターを表示するための推奨される方法です。
src string — 表示する特定の画像のURL。srcとdidの両方が提供された場合、srcが優先されます。
size number (default: 40) — アバターのサイズ（幅と高さ）をピクセル単位で指定します。
shape 'circle' | 'square' (default: 'circle') — アバターの形状を定義します。circleまたはsquareのいずれかを指定できます。
variant string (default: 'beam') — DIDからアバターを生成するために使用されるアルゴリズム。一般的な値にはbeam、pixel、ringなどがあります。
...rest any — classNameやstyleのような他の標準HTML属性は、コンポーネントのルートdiv要素に渡すことができます。

ユーザーのアバターを表示した後、彼らのDIDアドレスも表示したいかもしれません。次のセクションに進み、Addressコンポーネントについて学びましょう。