Id

<Clover.Id /><clover-id>0.2 kB added to a page with a Root, gzipped7 kB added to a page with a <clover-root>, styles included, gzipped

The resource’s own address, as a link.

<Clover.Root iiifContent={url}>
  <Clover.Id of= />
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-id of=></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.

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`.

`<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.


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


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

Outside a Root

Give it value, an address, and it needs no Root<clover-root>.


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


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