Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@samvera/nectar-iiif
Advanced tools
React.js UI component library of IIIF Presentation API 3.0 property fluent primitives.
React.js UI component library of IIIF Presentation API 3.0 property fluent primitives.
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
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 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
Linking Properties
Prop | Type | Default | Required |
---|---|---|---|
as | span , h1 , h2 , h3 , h4 , h5 , h6 , p , label , dt , dd | span | -- |
label | label | -- | Yes |
import { Label } from "@samvera/nectar-iiif";
return <Label label={manifest.label} as="h1" lang="en" />;
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 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.
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} />;
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} />;
import { RequiredStatement } from "@samvera/nectar-iiif";
return <RequiredStatement requiredStatement={manifest.requiredStatement} />;
Prop | Type | Default | Required |
---|---|---|---|
requiredStatement | requiredStatement | -- | Yes |
customValueDelimiter | string? | , | -- |
Prop | Type | Default | Required |
---|---|---|---|
as | ol , ul | ul | -- |
partOf | partOf | -- | Yes |
import { PartOf } from "@samvera/nectar-iiif";
return <PartOf partOf={manifest.partOf} as="li" />;
Prop | Type | Default | Required |
---|---|---|---|
as | ol , ul | ul | -- |
seeAlso | seeAlso | -- | Yes |
import { SeeAlso } from "@samvera/nectar-iiif";
return <SeeAlso seeAlso={manifest.seeAlso} as="li" />;
Prop | Type | Default | Required |
---|---|---|---|
as | span , h1 , h2 , h3 , h4 , h5 , h6 , p | span | -- |
summary | summary | -- | Yes |
customValueDelimiter | string? | , | -- |
import { Summary } from "@samvera/nectar-iiif";
return <Summary summary={manifest.summary} as="p" />;
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.
Prop | Type | Default | Required |
---|---|---|---|
thumbnail | thumbnail | -- | Yes |
altAsLabel | label | -- | -- |
import { Thumbnail } from "@samvera/nectar-iiif";
return <Thumbnail thumbnail={manifest.thumbnail} altAsLabel={manifest.label} />;
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 |
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.
FAQs
React.js UI component library of IIIF Presentation API 3.0 property fluent primitives.
We found that @samvera/nectar-iiif demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.