Skip to Content

Provider

<Clover.Provider /><clover-provider>1 kB added to a page with a Root, gzipped16 kB added to a page with a <clover-root>, styles included, gzipped

Who provided the resource: each provider’s logo and name, linked to its homepage.

<Clover.Root iiifContent={url}>
  <Clover.Provider />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-provider></clover-provider>
</clover-root>

API reference

Reads provider from the Root’s resource and renders a ul, an item for each provider: its logo and its name, linked to its first homepage. A provider with no name of its own is named by its homepage. It renders nothing while there is none, and its other props go to the ul. A provider whose logo fails to load keeps its name, linked; one that drew its logo alone is left out, so no empty link is left behind.

Provider<clover-provider> is a compound part: what it holds is drawn once for each provider, inside its link, and the parts in it read that provider rather than the resource. Logo<clover-logo> draws its logo, Label<clover-label> its name, and Homepage<clover-homepage>, SeeAlso<clover-see-also> and Id<clover-id> its own links. A part of your own reads it with Clover.useProvider(). The Panel’s About section shows it whole, and the Default and Document templates its logo alone, at the end of their title’s line.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose provider: the resource’s, or the Canvas the reader is on.
value{ id, label, homepage, logo }[]—Providers to show instead of the Root’s, as IIIF gives them.
linkbooleantrueLink each provider to its homepage, when it has one.
childrenReactNodeits logo and its nameWhat to draw for each provider.
classNamestring—Added to clover-provider.

<clover-provider>

The providers: who provided the resource, each its logo and its name, linked to its homepage. With a clover-logo in it, each provider's logo alone, linked, its alt text the provider's name.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (a URL or JSON)—Providers (IIIF Agents), instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
link"false"—"false" draws each provider without a link to its homepage.
.valueRecord<string, unknown> | Array<Record<string, unknown>> | null—As a property: Providers (IIIF Agents), instead of the root's.

Examples

Its logo alone

Hold a Logo<clover-logo>, and each provider is its logo alone, linked to its homepage and named by the provider for assistive technology, as the templates show it.

<Clover.Root iiifContent={url}>
  <Clover.Provider>
    <Clover.Logo />
  </Clover.Provider>
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-provider>
    <clover-logo></clover-logo>
  </clover-provider>
</clover-root>

Outside a Root

Give it value, the providers as IIIF gives them, and it needs no Root<clover-root>.

<Clover.Provider
  value={[
    {
      id: "https://www.library.northwestern.edu/",
      type: "Agent",
      label: { none: ["Northwestern University Libraries"] },
      homepage: [
        {
          id: "https://dc.library.northwestern.edu/",
          type: "Text",
          format: "text/html",
        },
      ],
      logo: [
        {
          id: "https://iiif.dc.library.northwestern.edu/iiif/2/00000000-0000-0000-0000-000000000003/full/pct:50/0/default.webp",
          type: "Image",
          format: "image/webp",
          width: 1190,
          height: 139,
        },
      ],
    },
  ]}
/>
<clover-provider
  value='[{"id":"https://www.library.northwestern.edu/","type":"Agent","label":{"none":["Northwestern University Libraries"]},"homepage":[{"id":"https://dc.library.northwestern.edu/","type":"Text","format":"text/html"}],"logo":[{"id":"https://iiif.dc.library.northwestern.edu/iiif/2/00000000-0000-0000-0000-000000000003/full/pct:50/0/default.webp","type":"Image","format":"image/webp","width":1190,"height":139}]}]'></clover-provider>