Skip to Content
This page documents Clover 3.x, @samvera/clover-iiif, the earlier version of Clover, kept here for reference. These docs lead with Clover 4: Get started.

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 —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  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={{ fontStyle: "italic" }}
/>

Language

Additional to being rendered to the DOM like other attributes, 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. The value of lang should be a two letter BCP 47  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  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/>"
/>