Nectar IIIF

React.js UI component library of IIIF Presentation API 3.0 property fluent primitives.

Demo | Code

Documentation

• Installation
• Basic Usage
• Primitives
  • Label
  • Homepage
  • Metadata
  • PartOf
  • RequiredStatement
  • SeeAlso
  • Summary
  • Thumbnail
• Attributes
• Language

Installation

Install the component from your command line using npm install,

npm install @samvera/nectar-iiif

OR if you prefer Yarn, use yarn add.

yarn add @samvera/nectar-iiif

Basic Usage

Add the Nectar component(s) to your jsx or tsx code.

import { Label, Summary } from "@samvera/nectar-iiif";

/**
 * Some logic may be required to retrieve the IIIF Manifest.
 */
const manifest = {...};

return (
  <>
    <Label label={manifest.label} as="h1" />
    <Summary summary={manifest.summary} as="p" />
  </>
);

Primitives

Primitives aim to cover most of the noted Descriptive and Linking properties noted in the IIIF Presentation API 3.0 specification. Some of these, specifically Provider may have a more complex component structure.

Completed (initial release) and proposed primitives include:

Descriptive Properties

• [x] Label
• [x] Metadata
• [x] Summary
• [x] RequiredStatement
• [ ] Rights
• [ ] Provider
• [x] Thumbnail

Linking Properties

• [x] Homepage
• [ ] Logo
• [ ] Rendering
• [x] SeeAlso
• [x] PartOf

Label

Reference

Usage

import { Label } from "@samvera/nectar-iiif";

return <Label label={manifest.label} as="h1" lang="en" />;

Homepage

import { Homepage } from "@samvera/nectar-iiif";

Wrap resource label with homepage id.

return <Homepage homepage={manifest.homepage} />;

Wrap React children with homepage id.

return (
  <Homepage homepage={manifest.homepage}>
    <figure>...</figure>
  </Homepage>
);

Metadata

Metadata is rendered am HTML dl with corresponding dt and dd elements for they respective label and value pairs. By default value entries are rendered as a string, with , interspersed to seperate multiple entries. A consuming application using can optionally update the value output for each entry.

Reference

import { Metadata } from "@samvera/nectar-iiif";

return <Metadata metadata={manifest.metadata} />;

Custom Value Content

If a consumign application required rendering specific metadata item values in a custom pattern, the customValueContent prop can be set for the <Metadata> component. The pattern requires matchingLabel as following https://iiif.io/api/presentation/3.0/#label and Content asa ReactElement carrying props. The element set for Content must map props.value to the appropriate code in the custom pattern.

In the example below, the value of Pantaloon with a matching label of { none: ["Subject"] } would be rendered as <dd><a href="https://example.org/?subject=Pantaloon">Pantaloon</a><dd>, while the value entry of comic masks would render simply as <dd>comic masks</dd>.

const metadata = [
  {
    label: { none: ["Genre"] },
    value: { none: ["comic masks"] },
  },
  {
    label: { none: ["Subject"] },
    value: { none: ["Pantaloon"] },
  },
];

const CustomValueSubject = (props) => (
  <a href={encodeURI(`https://example.org/?subject=${props.value}`)}>
    {props.value}
  </a>
);

const customValueContent = [
  {
    matchingLabel: { none: ["Subject"] },
    Content: <CustomValueSubject />,
  },
];

return <Metadata metadata={metadata} customValueContent={customValueContent} />;

RequiredStatement

import { RequiredStatement } from "@samvera/nectar-iiif";

return <RequiredStatement requiredStatement={manifest.requiredStatement} />;

Reference

PartOf

Reference

import { PartOf } from "@samvera/nectar-iiif";

return <PartOf partOf={manifest.partOf} as="li" />;

SeeAlso

Reference

import { SeeAlso } from "@samvera/nectar-iiif";

return <SeeAlso seeAlso={manifest.seeAlso} as="li" />;

Summary

Reference

Usage

import { Summary } from "@samvera/nectar-iiif";

return <Summary summary={manifest.summary} as="p" />;

Thumbnail

Thumbnails are rendered to a relative HTML <img> or <video> element dependendent on the type of the resource in the thumbnail entry. Currently, only type Image and Video are supported.

Reference

import { Thumbnail } from "@samvera/nectar-iiif";

return <Thumbnail thumbnail={manifest.thumbnail} altAsLabel={manifest.label} />;

Attributes

All primitives accept common HTMLElement attributes.

Language (Internationalization)

The value of lang will couple with InternationalString props to output the denoted label, value, summary entries. If lang is undefined, entries will default to the first entry in the array index.