Skip to Content

RequiredStatement

<Clover.RequiredStatement /><clover-required-statement>1 kB added to a page with a Root, gzipped7 kB added to a page with a <clover-root>, styles included, gzipped

The resource’s required statement, or the current Canvas’s: text that must be shown with it, such as an attribution.

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

API reference

Reads requiredStatement from the Root’s resource and renders its label and value as Metadata<clover-metadata> renders a pair, in a description list. It renders nothing while there is none. Its other props go to the dl.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose statement: the resource’s, or the Canvas the reader is on.
value{ label, value }—A statement to show instead of the Root’s. Outside a Root, the one.
classNamestring—Added to clover-required-statement.

<clover-required-statement>

The required statement: the attribution that must be shown, as a label and its value.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (a URL or JSON)—A required statement, instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
.value{ label: Record<string, string[]>; value: Record<string, string[]> } | null—As a property: A required statement, instead of the root's.

Examples

With the Body

Show it with what it is about: here, under the Body.

<Clover.Body />
<Clover.RequiredStatement />
<clover-body></clover-body>
<clover-required-statement></clover-required-statement>

A statement of your own

Give it value to show a statement you hold, in a Root<clover-root> or on its own.

<Clover.RequiredStatement
  value={{
    label: { en: ["Attribution"] },
    value: {
      en: [
        "Berliner Tageblatt - Staatsbibliothek zu Berlin - Preußischer Kulturbesitz, via Europeana. Public Domain Mark.",
      ],
    },
  }}
/>
<clover-required-statement
  value='{"label":{"en":["Attribution"]},"value":{"en":["Berliner Tageblatt - Staatsbibliothek zu Berlin - Preußischer Kulturbesitz, via Europeana. Public Domain Mark."]}}'></clover-required-statement>

Previous versions

Clover 3.x › RequiredStatement

  • requiredStatement is now value; inside a Root<clover-root>, leave it out.
  • A language’s values are joined with commas: no customValueDelimiter.
  • 3.x’s lang is the Root’s language.