Documentation
Metadata

Metadata

An ordered list of descriptions to be displayed to the user when they interact with the resource, given as pairs of human readable label and value entries.

metadata ↗ 
<Metadata
  metadata={[
    {
      label: {
        none: ["Creator"],
      },
      value: {
        none: ["Fava, Antonio, 1949-"],
      },
    },
    {
      label: {
        none: ["Date"],
      },
      value: {
        none: ["2012"],
      },
    },
  ]}
/>

Usage

React

import { Metadata } from "@samvera/clover-iiif/primitives";
 
const CustomMetadata = ({ metadata }) => {
  return <Metadata metadata={metadata} />;
};
 
export default CustomMetadata;

API Reference

PropTypeDefaultRequired
asdldl--
metadatametadata (opens in a new tab)--Yes
customValueContentPrimitivesCustomValueContent[]----
customValueDelimiterstring?,--
classNamestring, undefined----
styleCSSProperties, undefined----
langstring, undefined----
titlestring, undefined----
data-*string, undefined----
aria-*AriaAttributes, undefined----

HTML Attributes

Metadata, like all Clover IIIF primitives accept common HTMLElement (opens in a new tab) attributes. Use the JSX style className prop to add custom classes. The same attribute methodology can be used for id, style, title, data-*, and aria-* props.

<Metadata
  metadata={[
    {
      label: {
        none: ["Creator"],
      },
      value: {
        none: ["Fava, Antonio, 1949-"],
      },
    },
    {
      label: {
        none: ["Date"],
      },
      value: {
        none: ["2012"],
      },
    },
  ]}
  style={{ color: "red" }}
/>

Language

Additional to being rendered to the DOM like other attributes, the value of lang (opens in a new tab) will couple with InternationalString (opens in a new tab) props to output the denoted label, value, summary entries. If lang is undefined, entries will default to the first entry in the array index. The value of lang should be a two letter BCP 47 (opens in a new tab) language code.

<Metadata
  metadata={[
    {
      label: {
        en: ["Associated"],
        de: ["Beteiligte"],
      },
      value: {
        en: ["Jan Brueghel the Elder"],
        de: ["Jan (der Ältere) Brueghel"],
      },
    },
    {
      label: {
        en: ["Technique"],
        de: ["Technik"],
      },
      value: {
        en: ["Oil", "copper"],
        de: ["Öl", "Kupfer"],
      },
    },
  ]}
  lang="de"
/>

Custom Values

If a consuming application requires rendering specific metadata item values in a custom pattern, the customValueContent prop can be used. The pattern requires matchingLabel following https://iiif.io/api/presentation/3.0/#label (opens in a new tab) and Content as a 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} />;

Custom Delimiter

<Metadata
  metadata={[
    {
      label: {
        none: ["Subject"],
      },
      value: {
        none: [
          "Masks",
          "Commedia dell'arte",
          "Italian drama (Comedy)",
          "Zanni (Fictitious character)",
        ],
      },
    },
  ]}
  customValueDelimiter="<br/>"
/>
LabelPartOf