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
| Prop | Type | Default | Required |
|---|---|---|---|
as | a | a | -- |
homepage | homepage (opens in a new tab) | -- | Yes |
className | string, undefined | -- | -- |
style | CSSProperties, undefined | -- | -- |
lang | string, undefined | -- | -- |
title | string, 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>