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

• Label
• Metadata
• Summary
• RequiredStatement
• Rights
• Provider
• Thumbnail

Linking Properties

• Homepage
• Logo
• Rendering
• SeeAlso
• PartOf

---

Label

Reference

Prop	Type	Default	Required
as	span, h1, h2, h3, h4, h5, h6, p, label, dt, dd	span	--
label	label	--	Yes

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

Prop	Type	Default	Required
as	dl	dl
metadata	metadata	--	Yes
customValueContent	NectarCustomValueContent[]	--	--
customValueDelimiter	string?	,	--

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

Prop	Type	Default	Required
requiredStatement	requiredStatement	--	Yes
customValueDelimiter	string?	,	--

---

PartOf

Reference

Prop	Type	Default	Required
as	ol, ul	ul	--
partOf	partOf	--	Yes

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

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

---

SeeAlso

Reference

Prop	Type	Default	Required
as	ol, ul	ul	--
seeAlso	seeAlso	--	Yes

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

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

---

Summary

Reference

Prop	Type	Default	Required
as	span, h1, h2, h3, h4, h5, h6, p	span	--
summary	summary	--	Yes
customValueDelimiter	string?	,	--

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

Prop	Type	Default	Required
thumbnail	thumbnail	--	Yes
altAsLabel	label	--	--

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

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

Attributes

All primitives accept common HTMLElement attributes.

Prop	Type	Default
className	string, undefined	undefined
style	CSSProperties, undefined	undefined
lang	string, undefined	undefined
title	string, undefined	undefined
data-*	string, undefined	undefined
aria-*	AriaAttributes, undefined	undefined

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.