@samvera/nectar-iiif

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
  • 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 PartOf and 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

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

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

RequiredStatement

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

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

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

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.