# Address

The `Address` component is a specialized UI element designed to display Decentralized Identifier (DID) addresses in a clean, readable, and user-friendly format. It intelligently handles the long strings typical of DIDs by providing options for shortening and easy copying, enhancing the overall user experience.

This component is a simple re-export from `@arcblock/ux/lib/Address`, providing a consistent way to display addresses within the DID Connect ecosystem.

## How to Import

To use the `Address` component, import it from its specific module path within the library.

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

## Basic Usage

Simply pass the DID string as a child to the component to render the full address.

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

## Features

The `Address` component includes several helpful features to improve usability.

### Shortening

Long DIDs can clutter the UI. Use the `shorten` prop to display a truncated version of the address, showing only the beginning and end characters. This is essential for lists or compact profile views.

### Copy to Clipboard

By adding the `copyable` prop, the component will render a copy icon next to the address. Clicking this icon copies the full DID to the user's clipboard, providing a convenient one-click action.

## Props

The `Address` component accepts the following props:

<x-field-group>
  <x-field data-name="children" data-type="string" data-required="true">
    <x-field-desc markdown>The DID address string that you want to display.</x-field-desc>
  </x-field>
  <x-field data-name="shorten" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>If `true`, the address will be shortened to a more compact format (e.g., `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>If `true`, a copy icon is displayed, allowing users to copy the full address to their clipboard with a single click.</x-field-desc>
  </x-field>
  <x-field data-name="responsive" data-type="boolean" data-default="true" data-required="false">
    <x-field-desc markdown>When `true`, the component will automatically shorten the address based on the available width, ensuring it fits within its container without breaking the layout.</x-field-desc>
  </x-field>
</x-field-group>

## Examples

Here are some common use cases for the `Address` component.

### Shortened and Copyable Address

This is the most common configuration, providing a compact and functional display suitable for most UIs.

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

### Usage with Avatar

The `Address` component works great alongside the `Avatar` component to build user profile elements.

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

Now that you know how to display user addresses, you might want to learn how to display their profile pictures. Check out the [Avatar](./ui-components-avatar.md) component documentation for more details.