# Address

`Address`コンポーネントは、分散型識別子（DID）アドレスをクリーンで読みやすく、ユーザーフレンドリーな形式で表示するために設計された特殊なUI要素です。DIDに典型的な長い文字列を、短縮や簡単なコピーのオプションを提供することで賢く処理し、全体的なユーザーエクスペリエンスを向上させます。

このコンポーネントは`@arcblock/ux/lib/Address`からの単純な再エクスポートであり、DID Connectエコシステム内でアドレスを表示するための一貫した方法を提供します。

## インポート方法

`Address`コンポーネントを使用するには、ライブラリ内の特定のモジュールパスからインポートします。

```javascript Import icon=logos:javascript
import Address from '@arcblock/did-connect-react/lib/Address';
```

## 基本的な使用法

コンポーネントにDID文字列を子として渡すだけで、完全なアドレスをレンダリングできます。

```jsx Basic Address Display icon=logos:react
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserProfile() {
  const userDid = 'z1Zg2a5Vw2fA2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t';

  return (
    <div>
      <h4>User DID:</h4>
      <Address>{userDid}</Address>
    </div>
  );
}
```

## 機能

`Address`コンポーネントには、使いやすさを向上させるためのいくつかの便利な機能が含まれています。

### 短縮

長いDIDはUIを乱雑にする可能性があります。`shorten`プロパティを使用して、アドレスの短縮版を表示し、先頭と末尾の文字のみを表示します。これは、リストやコンパクトなプロファイルビューに不可欠です。

### クリップボードにコピー

`copyable`プロパティを追加すると、コンポーネントはアドレスの横にコピーアイコンをレンダリングします。このアイコンをクリックすると、完全なDIDがユーザーのクリップボードにコピーされ、便利なワンクリックアクションが提供されます。

## Props

`Address`コンポーネントは以下のpropsを受け入れます：

<x-field-group>
  <x-field data-name="children" data-type="string" data-required="true">
    <x-field-desc markdown>表示したいDIDアドレス文字列。</x-field-desc>
  </x-field>
  <x-field data-name="shorten" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>`true`の場合、アドレスはよりコンパクトな形式（例：`z1Zg2a...s0t`）に短縮されます。</x-field-desc>
  </x-field>
  <x-field data-name="copyable" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>`true`の場合、コピーアイコンが表示され、ユーザーはワンクリックで完全なアドレスをクリップボードにコピーできます。</x-field-desc>
  </x-field>
  <x-field data-name="responsive" data-type="boolean" data-default="true" data-required="false">
    <x-field-desc markdown>`true`の場合、コンポーネントは利用可能な幅に基づいてアドレスを自動的に短縮し、レイアウトを崩さずにコンテナ内に収まるようにします。</x-field-desc>
  </x-field>
</x-field-group>

## 例

以下は`Address`コンポーネントの一般的な使用例です。

### 短縮およびコピー可能なアドレス

これは最も一般的な設定で、ほとんどのUIに適したコンパクトで機能的な表示を提供します。

```jsx Shortened and Copyable icon=logos:react
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserCard({ did }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span>DID:</span>
      <Address shorten copyable>
        {did}
      </Address>
    </div>
  );
}
```

### Avatarとの使用

`Address`コンポーネントは、`Avatar`コンポーネントと並行して使用することで、ユーザープロファイル要素を構築するのに最適です。

```jsx Profile Header icon=logos:react
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import { useSession } from '@arcblock/did-connect-react';

function ProfileHeader() {
  const { session } = useSession();

  if (!session.user) {
    return <p>Please log in.</p>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <Avatar did={session.user.did} />
      <div>
        <strong>{session.user.name}</strong>
        <Address shorten copyable>
          {session.user.did}
        </Address>
      </div>
    </div>
  );
}
```

ユーザーアドレスの表示方法を学んだので、次はプロフィール写真の表示方法を学びたいかもしれません。[Avatar](./ui-components-avatar.md)コンポーネントのドキュメントで詳細を確認してください。