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.

Features

Provide a IIIF Presentation API (opens in a new tab) 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 install @samvera/clover-iiif

Usage

React

Add the Scroll component to your jsx or tsx code.

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.

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

Next.js

Implementation with Next.js requires a dynamic import (opens in a new tab) 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.

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.

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.

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

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