---
title: "Value"
description: "Any IIIF language map you hold, in the reader's language, read strictly by its format as plain text, IIIF's HTML or Markdown."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/value
version: "4"
---

# Value

\<Clover.Value /> (web components: \<clover-value>)3 kB loaded by a page with it alone to first view, gzipped (web components: 41 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.

> **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.Value
  value={{ en: ["Plates pair <i>Then</i> with <i>Now</i>."] }}
  format="text/html"
/>
```

**Web components**

```html
<clover-value
  value='{"en":["Plates pair <i>Then</i> with <i>Now</i>."]}'
  format="text/html">
</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.

**React**

| Prop           | Type                     | Default     | Description                                                   |
| -------------- | ------------------------ | ----------- | ------------------------------------------------------------- |
| `value`        | language map or `string` | —           | The text, as IIIF gives it: `{ en: ["…"] }`.                  |
| `format`       | `string`                 | IIIF’s rule | `text/html`, `text/markdown`, or any other, shown as written. |
| `headingLevel` | `number`                 | `3`         | With Markdown, its first heading’s level.                     |
| `as`           | element type             | `"span"`    | The element to render: a `div` for paragraphs and lists.      |
| `className`    | `string`                 | —           | Added to `clover-value`.                                      |

**Web components**

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

| Name            | Type                                         | Default | Description                                                                         |
| --------------- | -------------------------------------------- | ------- | ----------------------------------------------------------------------------------- |
| `value`         | `string (a URL or JSON)`                     | —       | What to show: text, or a IIIF language map as JSON.                                 |
| `format`        | `string`                                     | —       | Its media type: text/html, text/plain or text/markdown. By IIIF's rule without one. |
| `heading-level` | `number`                                     | `3`     | With Markdown, the level of its first heading.                                      |
| `as`            | `"span" \| "p" \| "div"`                     | `span`  | The element to draw.                                                                |
| `.value`        | `string \| 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.

> **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.Value
  value={{ en: ["Plates pair <i>Then</i> with <i>Now</i>."] }}
  format="text/plain"
/>
```

**Web components**

```html
<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 `headingLevel` (web components: `heading-level`). Here, under an `h3`, that is 4.

> **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
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"
/>;
```

**Web components**

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

> **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.Value
  value={{ en: ["<p>Plates pair <i>Then</i> with <i>Now</i>.</p>"] }}
  as="div"
/>
```

**Web components**

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