@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

Label

Reference

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

Usage

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

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

Summary

Reference

Prop	Type	Default	Required
as	span, h1, h2, h3, h4, h5, h6, p	p	--
language	string	none	--
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>
);