Documentation
Homepage

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 (opens in a new tab) 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 (opens in a new tab)--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 (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.

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. An aria-label element with the value of the homepage label.

<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>View Homepage</span>
</Homepage>
DemoLabel