---
title: "Body"
description: "The Root's current view, drawn by Canvas or by a renderer of your own, in a box with a height."
url: https://clover.iiif.library.northwestern.edu/docs/body
version: "4"
---

# Body

\<Clover.Body /> (web components: \<clover-body>)36 kB added to a page with a Root, gzipped (web components: 56 kB added to a page with a \<clover-root>, styles included, gzipped)

The active items of the relative manifest. Items may be a spread of images, audio, video or a 3D object. Wraps the Canvas, Timeline and Scene components.

> **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.Body
    controls={true}
    navigator={false}
    style={{ height: 320 }}
  />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <clover-body
    controls="true"
    navigator="false"
    style="height: 320px">
  </clover-body>
</clover-root>
```

## API reference

Draws the Root’s current view with [`Canvas` (web components: `<clover-canvas>`)](https://clover.iiif.library.northwestern.edu/docs/canvas), or with a renderer of yours that claims it, in a box as tall as `--clover-body-height`, `60vh` by default. It works only inside a `Root` (web components: `<clover-root>`). Its other props are [Canvas’s](https://clover.iiif.library.northwestern.edu/docs/canvas#api-reference), and go to the Canvas, but for what to draw, which comes from the Root; its label, annotations, chapters and language do too, unless you pass your own.

While the Root loads, it is `aria-busy` and shows Clover’s loading mark along its top edge; `<Clover.Status loading={false} />` (web components: `<clover-status loading="false"></clover-status>`) announces it. The table of contents is [`Contents` (web components: `<clover-contents>`)](https://clover.iiif.library.northwestern.edu/docs/contents).

**React**

| Prop        | Type                  | Default    | Description                                                |
| ----------- | --------------------- | ---------- | ---------------------------------------------------------- |
| `renderers` | `BodyRenderer[]`      | The Root’s | Components of yours that draw the views they claim.        |
| `style`     | `React.CSSProperties` | —          | On its box, merged over its inline `height`.               |
| `className` | `string`              | —          | Added to `clover-body`.                                    |
| `children`  | `ReactNode`           | —          | Controls after Clover’s own, or the renderer’s `children`. |

**Web components**

### `<clover-body>`

The view of the clover-root it is in, drawn as Body draws it: images, video and sound, or a renderer of yours. It is the Body's box, its height from --clover-body-height (60vh by default) or its own style. A clover-panel-toggle, and a button of yours, in it are among its controls.

| Name                       | Type                                                                                                                                                                                     | Default | Description                                                                                                                                                                                                                                    |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `controls`                 | `boolean`                                                                                                                                                                                | `true`  | "false" leaves out the controls over the Body.                                                                                                                                                                                                 |
| `navigator`                | `boolean`                                                                                                                                                                                | `false` | A small map of the whole image, while zoomed in.                                                                                                                                                                                               |
| `placeholder`              | `boolean`                                                                                                                                                                                | `true`  | "false" opens a Canvas straight away, past its placeholderContainer.                                                                                                                                                                           |
| `animate-annotations`      | `boolean`                                                                                                                                                                                | `false` | Glide to a picked annotation, rather than frame it in one cut. A reader who asks for reduced motion gets the cut.                                                                                                                              |
| `.handle`                  | `CloverCanvasHandle \| null`                                                                                                                                                             | —       | Read-only. The Canvas's handle once its view is laid out (clover-ready), as onReady hands it in React: the camera and its coordinates (handle.zoomBy(2), handle.home()). Null before.                                                          |
| `.controls`                | `boolean \| { zoom?: boolean; fullPage?: boolean; rotation?: boolean; reset?: boolean; annotations?: boolean; information?: boolean; map?: boolean; [option: string]: unknown } \| null` | —       | As a property: Which of the Body's controls it shows, as Canvas's controls takes it: false for none, or some ({ rotation: false }), in place of the attribute.                                                                                 |
| `.options`                 | `{ request?: { credentials?: RequestCredentials; headers?: Record<string, string>; fetch?: typeof fetch }; [key: string]: unknown } \| null`                                             | —       | The Canvas's options: the request it loads with (credentials, headers, a fetch of your own), its gestures and more.                                                                                                                            |
| `.controlButtons`          | `CloverControlButtons \| null`                                                                                                                                                           | —       | The Body's controls, each replaced by a button you make: a function given the control's name, label and Clover's icon, returning the button. Clover keeps it named, keyed and in its state, presses the control with it, and adds its popover. |
| `.renderers`               | `CloverRenderer[] \| null`                                                                                                                                                               | —       | Renderers of yours for this Body only, in place of the root's: each claims views (canvasId, format or match) and draws one into a box of its own (render).                                                                                     |
| `clover-ready`             | `{ handle: CloverCanvasHandle }`                                                                                                                                                         | —       | An event. The view is laid out and fitted: its handle is here, and works from now on.                                                                                                                                                          |
| `clover-annotation-active` | `{ id: string \| null }`                                                                                                                                                                 | —       | An event. An annotation is hovered or focused; null when none is.                                                                                                                                                                              |
| `clover-caption-change`    | `{ caption: { id: string; language?: string } \| null }`                                                                                                                                 | —       | An event. The reader chose a caption file in the Captions menu, or Off (null).                                                                                                                                                                 |
| `clover-ended`             | `Record<string, never>`                                                                                                                                                                  | —       | An event. A recording played to its end.                                                                                                                                                                                                       |

## Examples

### Height

Set `--clover-body-height` on it, or on anything around it: `100%` fills a parent with a height of its own.

> **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.Body style={{ "--clover-body-height": "16rem" }} />
```

**Web components**

```html
<clover-body style="--clover-body-height: 16rem"></clover-body>
```

### Controls

Use `controls` to choose Clover’s controls: `false` for none, or an object that leaves some out.

> **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.Body controls={{ rotation: false }} />
```

**Web components**

```html
<clover-body></clover-body>
 
<script type="module">
  const body = document.querySelector("clover-body");
  body.controls = { rotation: false };
</script>
```

### Navigator

Use `navigator` for an overview of the whole image, in the top left, to press or drag in.

> **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.Body navigator />
```

**Web components**

```html
<clover-body navigator></clover-body>
```

### Controls of your own

Children join the Canvas’s controls, after Clover’s, and stay where Clover’s are left out: over a placeholder, or a lone recording. Name each one as Clover’s are named ([Controls of your own](https://clover.iiif.library.northwestern.edu/docs/composing#controls-of-your-own)).

**React**

```jsx
<Clover.Body>
  <Clover.PanelToggle open={open} onOpenChange={setOpen} controls="panel" />
</Clover.Body>
```

**Web components**

```html
<!-- The toggle shows the panel while the panel is not hidden: hide it to start it shut. -->
<clover-body>
  <clover-panel-toggle controls="panel"></clover-panel-toggle>
</clover-body>
```

### Renderers of your own

Give `renderers` (web components: `.renderers`) to `Body` (web components: `<clover-body>`), or to the `Root` (web components: `<clover-root>`) for every `Body` (web components: `<clover-body>`) in it, and a view that one claims, by Canvas id, painting `format` or a `match` test, is drawn by your component ([Renderers of your own](https://clover.iiif.library.northwestern.edu/docs/composing#renderers-of-your-own)).

**React**

```jsx
const renderers = [{ format: ["model/gltf-binary"], component: ModelViewer }];
 
<Clover.Body renderers={renderers} />;
```

**Web components**

```html
<clover-body></clover-body>
 
<script type="module">
  document.querySelector("clover-body").renderers = [
    {
      format: ["model/gltf-binary"],
      render(container, { bodies }) {
        const model = document.createElement("model-viewer");
        model.setAttribute("src", bodies[0].id);
        container.append(model);
      },
    },
  ];
</script>
```

## Previous versions

[Clover 3.x › Viewer](https://clover.iiif.library.northwestern.edu/docs/3.x/viewer)

- `options.canvasHeight` is `--clover-body-height`.
- `customDisplays` is `renderers` (web components: `.renderers`), on `Body` (web components: `<clover-body>`) or the `Root` (web components: `<clover-root>`).