Skip to Content

Value

<Clover.Value /><clover-value>2 kB loaded by a page with it alone to first view, gzipped39 kB loaded by a page with it alone to first view, styles included, gzipped

Any IIIF text you hold, in the reader’s language, as plain text, HTML or Markdown.

<Clover.Value
  value={{ en: ["Plates pair <i>Then</i> with <i>Now</i>."] }}
  format=
/>
<clover-value
  value='{"en":["Plates pair <i>Then</i> with <i>Now</i>."]}'
  format=>
</clover-value>

API reference

Shows value in the reader’s language, read by its format, and renders a span. Its HTML is sanitized to what IIIF allows. It reads nothing from the Root’s resource, renders nothing while there is no text, and its other props go to its element.

PropTypeDefaultDescription
valuelanguage map or string—The text, as IIIF gives it: { en: ["…"] }.
formatstringIIIF’s ruletext/html, text/markdown, or any other, shown as written.
headingLevelnumber3With Markdown, its first heading’s level.
aselement type"span"The element to render: a div for paragraphs and lists.
classNamestring—Added to clover-value.

<clover-value>

Any IIIF language map in the reader's language, read strictly by its format: text/html as sanitized HTML, text/plain as written, text/markdown as Markdown.

NameTypeDefaultDescription
valuestring (a URL or JSON)—What to show: text, or a IIIF language map as JSON.
formatstring—Its media type: text/html, text/plain or text/markdown. By IIIF's rule without one.
heading-levelnumber3With Markdown, the level of its first heading.
as"span" | "p" | "div"spanThe element to draw.
.valuestring | Record<string, string[]> | null—As a property: What to show.

Examples

Plain text

Use format="text/plain" to show a value as written, tags and all, its line breaks kept.

<Clover.Value
  value={{ en: ["Plates pair <i>Then</i> with <i>Now</i>."] }}
  format="text/plain"
/>
<clover-value
  value='{"en":["Plates pair <i>Then</i> with <i>Now</i>."]}'
  format="text/plain"></clover-value>

Markdown

Use format="text/markdown" for Markdown: its lists are lists, and its headings headings, the first at headingLevelheading-level. Here, under an h3, that is 4.

const description = {
  en: [
    `# The White bicycles
 
Issued in 1896 by the **White Sewing Machine Company**.
 
## Plates
 
- Thulstrup
- Mente
- Veenfliet
- Clarke`,
  ],
};
 
<Clover.Value
  value={description}
  format="text/markdown"
  headingLevel={4}
  as="div"
/>;
<clover-value format="text/markdown" heading-level="4" as="div"></clover-value>
 
<script type="module">
  document.querySelector("clover-value").value = {
    en: [
      `# The White bicycles
 
Issued in 1896 by the **White Sewing Machine Company**.
 
## Plates
 
- Thulstrup
- Mente
- Veenfliet
- Clarke`,
    ],
  };
</script>

Without a format

With no format, IIIF’s rule decides: a value is HTML when it runs from a first < to a last >, as this one does, and is shown as written otherwise.

<Clover.Value
  value={{ en: ["<p>Plates pair <i>Then</i> with <i>Now</i>.</p>"] }}
  as="div"
/>
<clover-value
  value='{"en":["<p>Plates pair <i>Then</i> with <i>Now</i>.</p>"]}'
  as="div"></clover-value>