---
title: "Id"
description: "A IIIF resource's id, its own address, as a link."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/id
version: "4"
---

# Id

\<Clover.Id /> (web components: \<clover-id>)0.2 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

The resource’s own address, as a link.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Id of="manifest" />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-id of="manifest"></clover-id>
</clover-root>
```

## API reference

Reads `id` from the Root’s resource and renders an `a` to it, the address as its text. For a Manifest, that is where its IIIF JSON is. The link is underlined, and a long address wraps rather than pushing the page sideways. It renders nothing while there is none, and its other props go to the `a`.

**React**

| Prop        | Type                     | Default      | Description                                                 |
| ----------- | ------------------------ | ------------ | ----------------------------------------------------------- |
| `of`        | `"manifest" \| "canvas"` | `"manifest"` | Whose `id`: the resource’s, or the Canvas the reader is on. |
| `value`     | `string`                 | —            | An address to show instead of the Root’s.                   |
| `className` | `string`                 | —            | Added to `clover-id`.                                       |

**Web components**

### `<clover-id>`

The resource's id: a link to its IIIF JSON.

| Name     | Type                     | Default    | Description                                                                            |
| -------- | ------------------------ | ---------- | -------------------------------------------------------------------------------------- |
| `of`     | `"manifest" \| "canvas"` | `manifest` | Whose property: the Manifest's, or the Canvas in view's.                               |
| `value`  | `string (a URL or JSON)` | —          | An id, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `.value` | `string \| null`         | —          | As a property: An id, instead of the root's.                                           |

## Examples

### The current Canvas

Use `of="canvas"` for the address of the Canvas in view. It changes as the reader moves.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Body />
<Clover.Id of="canvas" />
```

**Web components**

```html
<clover-body></clover-body> <clover-id of="canvas"></clover-id>
```

### Outside a Root

Give it `value`, an address, and it needs no `Root` (web components: `<clover-root>`).

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Id value="https://clover.iiif.library.northwestern.edu/mocks/tagging/manifest.json" />
```

**Web components**

```html
<clover-id
  value="https://clover.iiif.library.northwestern.edu/mocks/tagging/manifest.json"></clover-id>
```