@samvera/nectar-iiif

Nectar IIIF

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

Demo

---

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 fetch the IIIF Manifest.
 */
const manifest = {...};

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

---

Primitives

All primitives accept 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

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.

Label

Reference

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

Usage

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

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

Summary

Reference

Prop	Type	Default	Required
as	span, h1, h2, h3, h4, h5, h6, p	span	--
summary	InternationalString	--	:white_check_mark:

Usage

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

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

Metadata

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

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

Required Statement

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

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

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>
);