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.

Homepage

A web page that is about the object represented by the resource that has the homepage property.

homepage ↗ 
<Homepage
  homepage={[
    {
      id: "https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Text",
      format: "text/html",
      label: {
        none: [
          "Homepage at Northwestern University Libraries Digital Collections",
        ],
      },
    },
  ]}
/>

Usage

React

import { Homepage } from "@samvera/clover-iiif/primitives";
 
const CustomHomepage = ({ homepage }) => {
  return <Homepage homepage={homepage} />;
};
 
export default CustomHomepage;

Next.js

If using Next.js, you will want to render your Homepage component as a Next.js Link  component. To do so, pass the Homepage component with the as prop using Link.

import Link from "next/link";
import { Primitives as IIIF } from "@samvera/clover-iiif/primitives";
 
const CustomHomepage = ({ homepage }) => {
  return <Homepage homepage={homepage} as={Link} />;
};
 
export default CustomHomepage;

API Reference

PropTypeDefaultRequired
asaa—
homepagehomepage —Yes
classNamestring, undefined——
styleCSSProperties, undefined——
langstring, undefined——
titlestring, undefined——
data-*string, undefined——
aria-*AriaAttributes, undefined——

HTML Attributes

Homepage, 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.

In the following example, an onClick() function will display an with the data-homepage-id attribute value.

<Homepage
  homepage={[
    {
      id: "https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Text",
      format: "text/html",
      label: {
        none: [
          "Homepage at Northwestern University Libraries Digital Collections",
        ],
      },
    },
  ]}
  role="button"
  data-homepage-id="https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275"
  onClick={(e) => {
    e.preventDefault();
    alert(e.target.dataset.homepageId);
  }}
/>

Wrapping Children

The Homepage component can also be used to wrap React children. The link then gets an aria-label with the value of the homepage label, which replaces the children as its accessible name. Keep the visible text a part of that label (here, “Homepage”), so speech-input users can say what they see.

<Homepage
  homepage={[
    {
      id: "https://dc.library.northwestern.edu/items/71153379-4283-43be-8b0f-4e7e3bfda275",
      type: "Text",
      format: "text/html",
      label: {
        none: [
          "Homepage at Northwestern University Libraries Digital Collections",
        ],
      },
    },
  ]}
>
  <span>Homepage</span>
</Homepage>