---
title: "Provider"
description: "Who provided a IIIF resource, its provider, each with its logo and its name linked to its homepage. A compound part, whose parts read the provider they are drawn for."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/provider
version: "4"
---

# Provider

\<Clover.Provider /> (web components: \<clover-provider>)1 kB added to a page with a Root, gzipped (web components: 17 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.

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

**Web components**

```html
<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](https://clover.iiif.library.northwestern.edu/docs/primitives/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` (web components: `<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` (web components: `<clover-logo>`) draws its logo, `Label` (web components: `<clover-label>`) its name, and `Homepage` (web components: `<clover-homepage>`), `SeeAlso` (web components: `<clover-see-also>`) and `Id` (web components: `<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.

**React**

| Prop        | Type                              | Default               | Description                                                       |
| ----------- | --------------------------------- | --------------------- | ----------------------------------------------------------------- |
| `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.      |
| `link`      | `boolean`                         | `true`                | Link each provider to its homepage, when it has one.              |
| `children`  | `ReactNode`                       | its logo and its name | What to draw for each provider.                                   |
| `className` | `string`                          | —                     | Added to `clover-provider`.                                       |

**Web components**

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

| 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)`                                            | —          | 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.                                              |
| `.value` | `Record<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` (web components: `<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.

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

**Web components**

```html
<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` (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.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,
        },
      ],
    },
  ]}
/>
```

**Web components**

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