---
title: "SeeAlso"
description: "A IIIF resource's seeAlso, the machine-readable descriptions of it elsewhere, as a list of links."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/see-also
version: "4"
---

# SeeAlso

\<Clover.SeeAlso /> (web components: \<clover-see-also>)0.7 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

Descriptions of the resource meant for machines, such as its record as JSON, as a list of links.

> **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.SeeAlso />
</Clover.Root>
```

**Web components**

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

## API reference

Reads `seeAlso` from the Root’s resource and renders a `ul`: a link to each description, named by its label or else its address, with its `format` after it. It renders nothing while there is none, and its other props go to the `ul`.

**React**

| Prop        | Type                      | Default      | Description                                                      |
| ----------- | ------------------------- | ------------ | ---------------------------------------------------------------- |
| `of`        | `"manifest" \| "canvas"`  | `"manifest"` | Whose `seeAlso`: the resource’s, or the Canvas the reader is on. |
| `value`     | `{ id, label, format }[]` | —            | Descriptions to show instead of the Root’s, as IIIF gives them.  |
| `className` | `string`                  | —            | Added to `clover-see-also`.                                      |

**Web components**

### `<clover-see-also>`

See also: machine-readable descriptions elsewhere, as a list of links.

| 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)`                                                                     | —          | Descriptions, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `.value` | `string \| Array<{ id: string; label?: Record<string, string[]>; format?: string }> \| null` | —          | As a property: Descriptions, instead of the root's.                                           |

## Examples

### Outside a Root

Give it `value`, the descriptions as IIIF gives them, 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.SeeAlso
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/works/46dc28d1-9d59-4160-a511-72418f70cffc",
      type: "Dataset",
      label: {
        none: ["Northwestern University Libraries Digital Collections API"],
      },
      format: "application/json",
    },
  ]}
/>
```

**Web components**

```html
<clover-see-also
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/works/46dc28d1-9d59-4160-a511-72418f70cffc","type":"Dataset","label":{"none":["Northwestern University Libraries Digital Collections API"]},"format":"application/json"}]'></clover-see-also>
```

### Without a label

A description without a label is named by its address. Its address wraps, with nowhere else to break, rather than pushing the page sideways.

> **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.SeeAlso
  value={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/works/24157482-0c2c-4907-8d25-7905adc3cfd9",
      type: "Dataset",
      format: "application/json",
    },
  ]}
/>
```

**Web components**

```html
<clover-see-also
  value='[{"id":"https://api.dc.library.northwestern.edu/api/v2/works/24157482-0c2c-4907-8d25-7905adc3cfd9","type":"Dataset","format":"application/json"}]'></clover-see-also>
```

## Previous versions

[Clover 3.x › SeeAlso](https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/seeAlso)

- `seeAlso` is `value`: inside a `Root` (web components: `<clover-root>`), leave it out.
- Always a `ul`: no `as`.
- 3.x’s `lang` is the Root’s `language`.