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.

Rendering

The Rendering component is used to display a list of alternate formats related to a resource. Whereas SeeAlso is used to link to a machine-readable resource such as metadata, the Rendering component alerts users that the resource is available in another format such as PDF or ePub or has a related format. Because of the wide variety of formats that resources can be available in, the Rendering component is flexible and be of any media type and contain any type of data.

rendering ↗ 
<Rendering
  rendering={[
    {
      id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
      type: "Text",
      label: {
        en: ["PDF version"],
      },
      format: "application/pdf",
    },
  ]}
/>

Usage

React

import { Rendering } from "@samvera/clover-iiif/primitives";
 
const CustomRendering = ({ rendering }) => {
  return <Rendering rendering={rendering} />;
};
 
export default CustomRendering;

API Reference

PropTypeDefaultRequired
asol, ulul—
renderingrendering —Yes
classNamestring, undefined——
styleCSSProperties, undefined——
langstring, undefined——
titlestring, undefined——
data-*string, undefined——
aria-*AriaAttributes, undefined——

Custom Element

The Rendering component can be rendered as either ol or ul elements. The default is ul.

<Rendering
  rendering={[
    {
      id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
      type: "Text",
      label: {
        en: ["PDF version"],
      },
      format: "application/pdf",
    },
  ]}
  as="ol"
/>