---
title: "Scroll (3.x)"
description: "Clover 3.x (@samvera/clover-iiif), the earlier version, documented for reference."
url: https://clover.iiif.library.northwestern.edu/docs/3.x/scroll
version: "3.x, the earlier version, superseded by Clover 4"
---

> This page documents **Clover 3.x**, `@samvera/clover-iiif`, the earlier version of Clover, kept here for reference. These docs lead with Clover 4: [Get started](https://clover.iiif.library.northwestern.edu/docs).

# Scroll

A UI component rendering a vertical scrolling articles that output individual Canvases, basic descriptive properties, and Annotations with `commenting` motivations with support for `transcribing` and `translating` motivations.

[Manifest ↗](https://iiif.io/api/presentation/3.0/#21-defined-types)

---

> **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.

## Features

Provide a [IIIF Presentation API](https://iiif.io/api/presentation/3.0/) Manifest and the component:

- Renders the Canvases of a IIIF Manifest as HTML5 `article` elements
- Outputs `Annotation` textual content along with `OpenSeadragon` for images
- Supports vertical scrolling and textual discovery with a fixed **Search…** input

## Installation

### npm

```shell
  npm install @samvera/clover-iiif
```

### yarn

```shell
  yarn add @samvera/clover-iiif
```

### pnpm

```shell
  pnpm install @samvera/clover-iiif
```

## Usage

### React

Add the `Scroll` component to your `jsx` or `tsx` code.

```jsx
import Viewer from "@samvera/clover-iiif/scroll";
```

Render `Scroll` with a IIIF Manifest URI. The only required prop is the `iiifContent`, which is the URI of the IIIF Manifest.

### Code

```jsx
<Scroll iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390" />
```

### Next.js

Implementation with Next.js requires a [dynamic import](https://nextjs.org/docs/advanced-features/dynamic-import) utilizing `next/dynamic`. This is due to Next’s node compilation method creating issue with an `OpenSeadragon` (a dependency of Clover IIIF) assumption of a browser `document` object.

```jsx
import dynamic from "next/dynamic";
 
const Scroll = dynamic(
  () => import("@samvera/clover-iiif").then((Clover) => Clover.Scroll),
  {
    ssr: false,
  },
);
 
const MyCustomScroll = () => {
  const iiifContent =
    "https://digital.lib.utk.edu/assemble/manifest/civilwar/5390";
 
  return <Scroll iiifContent={iiifContent} />;
};
```

## API Reference

`Scroll` can configured through an `options` prop, which will serve as a object for common options.

| Prop                  | Type                                                                                  | Required | Default         |
| --------------------- | ------------------------------------------------------------------------------------- | -------- | --------------- |
| `iiifContent`         | `string`                                                                              | Yes      |                 |
| `options`             | `object`                                                                              | No       |                 |
| `options.offset`      | `number`                                                                              | No       | `0`             |
| `options.figure`      | [See Figure](https://clover.iiif.library.northwestern.edu/docs/3.x/scroll#figure)     | No       |                 |
| `options.language`    | [See Language](https://clover.iiif.library.northwestern.edu/docs/3.x/scroll#language) | No       |                 |
| `options.annotations` | `{ motivations?: string[] }`                                                          | No       | All motivations |

### Offset

The `options.offset` refers to the number of pixels to offset the fixed **Search…** input when scrolling vertically. This is useful when the `Scroll` is rendered within a page with a fixed header.

```jsx
<Scroll
  iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390"
  options={{ offset: 90 }}
/>
```

### Figure

The Scroll component renders a `figure` element for each Canvas. The `options.figure` object allows for customization of the `figure` width, aspect ratio, and display. This can be useful for customizing the Scroll component to fit within a specific layout alongside other image viewers.

| Prop                         | Type                                                                   | Required | Default                                                            |
| ---------------------------- | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
| `options.figure.aspectRatio` | `number`                                                               | No       | `1.618` [Golden Ratio](https://en.wikipedia.org/wiki/Golden_ratio) |
| `options.figure.display`     | `thumbnail`, `image-viewer`                                            | No       | `image-viewer`                                                     |
| `options.figure.width`       | `string` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | No       | `38.2%`                                                            |

```jsx
<Scroll
  iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390"
  options={{
    figure: {
      aspectRatio: 1,
      display: "thumbnail",
      width: "200px",
    },
  }}
/>
```

### Language

The `options.language` object allows for the configuration of the language options for the Scroll component. This includes the default languages and language options.

By default, the `options.language` object is not set, and the Scroll component will not display any language options. When the `options.language` object is set, the Scroll component will display a language dropdown that allows users to filter the content by languages within the Manifest annotation body resources. If defaultLanguages are not set, the Scroll component will display all languages available in the Manifest.

The `options.language.options` array should be an array of objects with key-value pairs where the key is the language code and the value is the language name. The language code should match the language code in the Manifest annotation body resources.

| Prop                                | Type                           | Required | Default |
| ----------------------------------- | ------------------------------ | -------- | ------- |
| `options.language.defaultLanguages` | `string[]`                     | No       | `[]`    |
| `options.language.enabled`          | `boolean`                      | Yes      | `false` |
| `options.language.options`          | `Array<[key: string]: string>` | No       | `[]`    |

```jsx
<Scroll
  iiifContent="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
  options={{
    offset: 90,
    language: {
      defaultLanguages: ["en"],
      enabled: true,
      options: [{ en: "English" }, { ar: "Arabic" }],
    },
  }}
/>
```

### Annotation Motivations

Control which annotation motivations the Scroll experience renders by providing `options.annotations.motivations`. Clover filters every manifest annotation so only allowed motivations are surfaced in the scrolling articles, search panel, and language extraction. Omit the option to display every available motivation.

```jsx
<Scroll
  iiifContent="https://digital.lib.utk.edu/assemble/manifest/civilwar/5390"
  options={{
    annotations: {
      motivations: ["commenting"],
    },
  }}
/>
```