\n \n );\n};\nexport default Work;","add-slider#Add Slider":"Finally, we add the Slider component to render the IIIF Collection that this Manifest is part of. We also need to import the swiper CSS files for baseline styling.\nimport React, { useEffect, useState } from \"react\";\nimport Viewer from \"@samvera/clover-iiif/viewer\";\nimport {\n Homepage,\n Label,\n Metadata,\n PartOf,\n RequiredStatement,\n SeeAlso,\n Thumbnail,\n} from \"@samvera/clover-iiif/primitives\";\nimport Slider from \"@samvera/clover-iiif/slider\";\nimport \"swiper/css\";\nimport \"swiper/css/navigation\";\nimport \"swiper/css/pagination\";\nconst Work = () => {\n const [manifest, setManifest] = useState();\n const manifestId =\n \"https://api.dc.library.northwestern.edu/api/v2/works/0902aed4-0eb0-4ab4-a151-c925493be04e?as=iiif\";\n const collectionId = manifest?.partOf[0].id;\n useEffect(() => {\n (async () => {\n const response = await fetch(manifestId);\n const json = await response.json();\n setManifest(json);\n })();\n }, [manifestId]);\n if (!manifest) return <>;\n return (\n \n \n
\n \n \n \n \n \n \n \n
\n \n \n );\n};\nexport default Work;","summary#Summary":"In this tutorial, we installed Clover IIIF and composed an unstyled \"Work\" page representing a IIIF Manifest. The completed code covered in these steps is available in a CodeSandbox."}},"/docs/homepage":{"title":"Homepage","data":{"":"A web page that is about the object represented by the resource that has the homepage property.\n\n\n Homepage at Northwestern University Libraries Digital Collections\n","usage#Usage":"","react#React":"import { Homepage } from \"@samvera/clover-iiif/primitives\";\nconst CustomHomepage = ({ homepage }) => {\n return ;\n};\nexport default CustomHomepage;","nextjs#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.\nimport Link from \"next/link\";\nimport { Primitives as IIIF } from \"@samvera/clover-iiif/primitives\";\nconst CustomHomepage = ({ homepage }) => {\n return ;\n};\nexport default CustomHomepage;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\ta\ta\t--\thomepage\thomepage\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","html-attributes#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.\n {\n e.preventDefault();\n alert(e.target.dataset.homepageId);\n }}\n/>\n\n Homepage at Northwestern University Libraries Digital Collections\n","wrapping-children#Wrapping Children":"The Homepage component can also be used to wrap React children. An aria-label element with the value of the homepage label.\n\n View Homepage\n\nView Homepage\n\n View Homepage\n"}},"/docs/i18n":{"title":"i18n","data":{"":"We welcome contributions to Clover IIIF in any language. If you would like to contribute to a language, please follow the instructions below.\n{\n \"commonClose\": \"Close\",\n \"commonNext\": \"Next\",\n \"commonPrevious\": \"Previous\",\n \"commonSearch\": \"Search\",\n \"commonSearchPlaceholder\": \"Search...\",\n \"commonShare\": \"Share\",\n \"commonViewAll\": \"View All\",\n ...\n}","how-to-contribute#How to contribute":"Fork the Clover IIIF repository.\nCreate a new file in the src/i18n/locales directory for the relative BCP 47 language code you would like to contribute towards, example fr.json for French.\nCopy the en.json file as a template and translate the string values for each key.\nImport the new language JSON file within the src/i18n/locales/index.ts file and include it in the default export.\nSubmit a pull request.","adding-a-new-locale#Adding a new locale":"Add a new file in the src/i18n/locales directory with the relative BCP 47 language code, example fr.json for French.\n{\n \"commonClose\": \"Fermer\",\n \"commonNext\": \"Suivant\",\n \"commonPrevious\": \"Précédent\",\n \"commonSearch\": \"Rechercher\",\n \"commonSearchPlaceholder\": \"Rechercher...\",\n \"commonShare\": \"Partager\",\n \"commonViewAll\": \"Voir Tout\",\n ...\n}\nimport en from \"./en.json\";\nimport fr from \"./fr.json\";\nexport default {\n en,\n fr,\n};","language-and-region-subtags#Language and Region subtags":"If you would like to contribute a locale for a lanugage with a region subtag,\nplease use the - dash character to separate the language and region in the filename,\nexample fr-CA.json for Canadian French.You will need to adjust the import statement in the src/i18n/locales/index.ts file to include the new locale.\nimport en from \"./en.json\";\nimport fr from \"./fr.json\";\nimport frCA from \"./fr-CA.json\";\nexport default {\n en,\n fr,\n \"fr-CA\": frCA,\n};"}},"/docs":{"title":"Docs","data":{"":"UI component library for rapidly creating high-quality and accessible IIIF-fluent web interfaces.Clover IIIF is a suite of Manifest and Collection components combined with lower-level IIIF Presentation 3.0 API UI components. Clover IIIF has a focus on accessibility, customization and developer experience. You can use Clover IIIF to build your own custom IIIF-fluent web interfaces while still using the full power of the IIIF Presentation 3.0 API.","vision#Vision":"Implementation of the IIIF Presentation API does not need to be limited to a primary viewer. Using Clover IIIF breaks the model of a \"viewer\" and allows the IIIF Presentation API to be used as a front-end for any web application. This is possible because the IIIF Presentation API is a highly defined and interoperable specification for representing digital objects. This means that the IIIF Presentation API can be used to represent any digital object, not just images. This concept gives creation to highly interoperable web user interfaces.","key-features#Key Features":"Accessibility - All components lean on WAI-ARIA design patterns to ensure that they are accessible to all users.\nCustomization - All components are designed to be easily customized with CSS.\nDeveloper Experience - All components are built with developer experience in mind and are designed to be easily integrated into any web application."}},"/docs/label":{"title":"Label","data":{"":"The Label component is used to display the label of a resource. It is used in the following contexts: Manifest, Canvas, Range, Annotation, AnnotationPage, Collection, and Manifest. It is a string or an object with language keys and string values.\n\nCrossing the Pend d'Oreille - Kalispel","usage#Usage":"","react#React":"import { Label } from \"@samvera/clover-iiif/primitives\";\nconst CustomLabel = ({ label }) => {\n return ;\n};\nexport default CustomLabel;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tspan, h1, h2, h3, h4, h5, h6, p, label, dt, dd\tspan\t--\tlabel\tlabel\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The Label component can be rendered as span, h1, h2, h3, h4, h5, h6, p, label, dt, or dd. The default is span.\n\n
Self-Portrait Dedicated to Paul Gauguin","html-attributes#HTML Attributes":"Label, 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.\n\n\n Self-Portrait Dedicated to Paul Gauguin\n","language#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.\n\n\n Notes des réunions de mise en scène et d'environnement\n"}},"/docs/partOf":{"title":"PartOf","data":{"":"A containing resource that includes the resource that has the partOf property.\n\n
","usage#Usage":"","react#React":"import { PartOf } from \"@samvera/clover-iiif/primitives\";\nconst CustomPartOf = ({ partOf }) => {\n return ;\n};\nexport default CustomPartOf;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tol, ul\tul\t--\tpartOf\tpartOf\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The PartOf component can be rendered as either ol or ul elements. The default is ul.\n\n\n
\n"}},"/docs/rendering":{"title":"Rendering","data":{"":"The Rendering component is used to display a list of alternate formats related to a resource. Whereas SeeAlso is used\nto link to a machine-readable resource such as metadata, the Rendering component alerts users that the resource is\navailable in another format such as PDF or ePub or has a related format. Because of the wide variety of formats that\nresources can be available in, the Rendering component is flexible and be of any media type and contain any type of\ndata.\n\n
\n
\n \n PDF version\n \n
\n
","usage#Usage":"","react#React":"import { Rendering } from \"@samvera/clover-iiif/primitives\";\nconst CustomRendering = ({ rendering }) => {\n return ;\n};\nexport default CustomRendering;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tol, ul\tul\t--\trendering\trendering\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The Rendering component can be rendered as either ol or ul elements. The default is ul.\n\n\n
\n"}},"/docs/requiredStatement":{"title":"RequiredStatement","data":{"":"The RequiredStatement component renders the required statement for a IIIF resource. The required statement is a human readable label and value pair that describes the rights status of the resource.\n\n
\n
\n
Attribution
\n
\n Courtesy of Northwestern University Libraries, The images on this web\n site are from material in the collections of the Charles Deering\n McCormick Library of Special Collections of Northwestern University\n Libraries, are provided for use by its students, faculty and staff,\n and by other researchers visiting this site, for research consultation\n and scholarly purposes only. Further distribution and/or any\n commercial use of the images from this site is not permitted.\n
\n
\n
","usage#Usage":"","react#React":"import { RequiredStatement } from \"@samvera/clover-iiif/primitives\";\nconst CustomRequiredStatement = ({ requiredStatement }) => {\n return ;\n};\nexport default CustomRequiredStatement;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tdl\tdl\t--\trequiredStatement\trequiredStatement\t--\tYes\tcustomValueDelimiter\tstring?\t,\t--\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","html-attributes#HTML Attributes":"RequiredStatement, 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.\n In Copyright: This Item is protected by copyright and/or related rights. You are free to use this Item in any way that is permitted by the copyright and related rights legislation that applies to your use. For other uses you need to obtain permission from the rights-holder(s). ',\n ],\n },\n }}\n className=\"custom-class\"\n/>\n
\n
\n
Rights
\n
\n \n \n \n \n \n \n \n In Copyright: This Item is protected by copyright and/or related rights. You are free to use this Item in any way that is permitted by the copyright and related rights legislation that applies to your use. For other uses you need to obtain permission from the rights-holder(s).\n \n \n
\n
\n
","language#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.\n\n
\n
\n
\n Kreditering\n
\n
\n Tilgjengeliggjort av Universitetsbiblioteket i Bergen\n
\n
\n
","custom-delimiter#Custom Delimiter":"\n
\n
\n
Attribution
\n
\n Courtesy of Northwestern University Libraries. The images on this web\n site are from material in the collections of the Charles Deering\n McCormick Library of Special Collections of Northwestern University\n Libraries, are provided for use by its students, faculty and staff,\n and by other researchers visiting this site, for research consultation\n and scholarly purposes only. Further distribution and/or any\n commercial use of the images from this site is not permitted.\n
\n
\n
"}},"/docs/scroll":{"title":"Scroll","data":{"":"A UI component rendering a vertical scrolling articles that output individual Canvases, basic descriptive properties, and Annotations with commenting motivations with support for transcribing and translating motivations.","features#Features":"Provide a IIIF Presentation API Manifest and the component:\nRenders the Canvases of a IIIF Manifest as HTML5 article elements\nOutputs Annotation textual content along with OpenSeadragon for images\nSupports vertical scrolling and textual discovery with a fixed Search... input","installation#Installation":"npm install @samvera/clover-iiif\n yarn add @samvera/clover-iiif\n pnpm install @samvera/clover-iiif","usage#Usage":"","react#React":"Add the Scroll component to your jsx or tsx code.\nimport Viewer from \"@samvera/clover-iiif/scroll\";\nRender Scroll with a IIIF Manifest URI. The only required prop is the iiifContent, which is the URI of the IIIF Manifest.\n","nextjs#Next.js":"Implementation with Next.js requires a dynamic import utilizing next/dynamic. This is due to Next's node compilation method creating issue with an OpenSeadragon (a dependency of Clover IIIF) assumption of a browser document object.\nimport dynamic from \"next/dynamic\";\nconst Scroll = dynamic(\n () => import(\"@samvera/clover-iiif\").then((Clover) => Clover.Scroll),\n {\n ssr: false,\n },\n);\nconst MyCustomScroll = () => {\n const iiifContent =\n \"https://digital.lib.utk.edu/assemble/manifest/civilwar/5390\";\n return ;\n};","api-reference#API Reference":"Scroll can configured through an options prop, which will serve as a object for common options.\nProp\tType\tRequired\tDefault\tiiifContent\tstring\tYes\t\toptions\tobject\tNo\t\toptions.offset\tnumber\tNo\t0\toptions.figure\tSee Figure\tNo\t\toptions.language\tSee Language\tNo","offset#Offset":"The options.offset refers to the number of pixels to offset the fixed Search... input when scrolling vertically. This is useful when the Scroll is rendered within a page with a fixed header.\n","figure#Figure":"The Scroll component renders a figure element for each Canvas. The options.figure object allows for customization of the figure width, aspect ratio, and display. This can be useful for customizing the Scroll component to fit within a specific layout alongside other image viewers.\nProp\tType\tRequired\tDefault\toptions.figure.aspectRatio\tnumber\tNo\t1.618 Golden Ratio\toptions.figure.display\tthumbnail, image-viewer\tNo\timage-viewer\toptions.figure.width\tstring CSS\tNo\t38.2%\t\n","language#Language":"The options.language object allows for the configuration of the language options for the Scroll component. This includes the default languages and language options.By default, the options.language object is not set, and the Scroll component will not display any language options. When the options.language object is set, the Scroll component will display a language dropdown that allows users to filter the content by languages within the Manifest annotation body resources. If defaultLanguages are not set, the Scroll component will display all languages available in the Manifest.The options.language.options array should be an array of objects with key-value pairs where the key is the language code and the value is the language name. The language code should match the language code in the Manifest annotation body resources.\nProp\tType\tRequired\tDefault\toptions.language.defaultLanguages\tstring[]\tNo\t[]\toptions.language.enabled\tboolean\tYes\tfalse\toptions.language.options\tArray<[key: string]: string>\tNo\t[]\t\n"}},"/docs/scroll/demo":{"title":"Demo","data":{"scroll#Scroll":"A UI component rendering vertical scrolling articles that output individual Canvases, basic descriptive properties, and Annotations with commenting motivations with support for transcribing and translating motivations."}},"/docs/seeAlso":{"title":"SeeAlso","data":{"":"The SeeAlso component is used to display a list of related resources. A machine-readable resource such as an XML or RDF description that is related to the current resource that has the seeAlso property. The resource may be of any media type, and contain any type of data.\n\n
","usage#Usage":"","react#React":"import { SeeAlso } from \"@samvera/clover-iiif/primitives\";\nconst CustomSeeAlso = ({ seeAlso }) => {\n return ;\n};\nexport default CustomSeeAlso;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tol, ul\tul\t--\tseeAlso\tseeAlso\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The SeeAlso component can be rendered as either ol or ul elements. The default is ul.\n\n\n
"}},"/docs/thumbnail":{"title":"Thumbnail","data":{"":"The Thumbnail component is used to display a thumbnail for a IIIF resource. This generally is an Image, however, could be a short Video or Sound clip.\n\n","usage#Usage":"","react#React":"import { Thumbnail } from \"@samvera/clover-iiif/primitives\";\nconst CustomThumbnail = ({ thumbnail }) => {\n return ;\n};\nexport default CustomThumbnail;","api-reference#API Reference":"Thumbnails are rendered to a relative HTML or "}},"/docs/viewer/contentsearch":{"title":"Contentsearch","data":{"viewer#Viewer":"","content-search#Content search.":"Type in anything in the search field, and click the search button or type return. This demo will show the search results for \"Berliner\". Click on any of search results, and Clover will zoom and pan to that search result.Due to the fact that the Clover documentation site is a statically generated, search will only return results for \"Berliner\" because the search service returns a static content search manifest. In a fully functional site, the search service will return a dynamic content search manifest based on the entered search words."}},"/docs/viewer/demo":{"title":"Demo","data":{"viewer#Viewer":"A UI component that renders a multicanvas IIIF item viewer with pan-zoom support for Image via OpenSeadragon and Video and Sound content resources using the HTML video element."}},"/docs/viewer":{"title":"Viewer","data":{"":"A UI component that renders a multicanvas IIIF item viewer with pan-zoom support for Image via OpenSeadragon and Video and Sound content resources using the HTML video element.","features#Features":"Provide a IIIF Presentation API Manifest or Collection and the component:\nRenders a multi-canvas Video, Sound, and Image viewer\nRenders thumbnails as navigation between canvases\nRenders annotations with the motivation of supplementing with a content resource having the format of text/vtt for Video and Sound\nVideo and Sound are rendered within a HTML5 ","usage#Usage":"","react#React":"import { Homepage } from \"@samvera/clover-iiif/primitives\";\nconst CustomHomepage = ({ homepage }) => {\n return ;\n};\nexport default CustomHomepage;","nextjs#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.\nimport Link from \"next/link\";\nimport { Primitives as IIIF } from \"@samvera/clover-iiif/primitives\";\nconst CustomHomepage = ({ homepage }) => {\n return ;\n};\nexport default CustomHomepage;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\ta\ta\t--\thomepage\thomepage\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","html-attributes#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.\n {\n e.preventDefault();\n alert(e.target.dataset.homepageId);\n }}\n/>\n\n Homepage at Northwestern University Libraries Digital Collections\n","wrapping-children#Wrapping Children":"The Homepage component can also be used to wrap React children. An aria-label element with the value of the homepage label.\n\n View Homepage\n\nView Homepage\n\n View Homepage\n"}},"/docs/i18n":{"title":"i18n","data":{"":"We welcome contributions to Clover IIIF in any language. If you would like to contribute to a language, please follow the instructions below.\n{\n \"commonClose\": \"Close\",\n \"commonNext\": \"Next\",\n \"commonPrevious\": \"Previous\",\n \"commonSearch\": \"Search\",\n \"commonSearchPlaceholder\": \"Search...\",\n \"commonShare\": \"Share\",\n \"commonViewAll\": \"View All\",\n ...\n}","how-to-contribute#How to contribute":"Fork the Clover IIIF repository.\nCreate a new file in the src/i18n/locales directory for the relative BCP 47 language code you would like to contribute towards, example fr.json for French.\nCopy the en.json file as a template and translate the string values for each key.\nImport the new language JSON file within the src/i18n/locales/index.ts file and include it in the default export.\nSubmit a pull request.","adding-a-new-locale#Adding a new locale":"Add a new file in the src/i18n/locales directory with the relative BCP 47 language code, example fr.json for French.\n{\n \"commonClose\": \"Fermer\",\n \"commonNext\": \"Suivant\",\n \"commonPrevious\": \"Précédent\",\n \"commonSearch\": \"Rechercher\",\n \"commonSearchPlaceholder\": \"Rechercher...\",\n \"commonShare\": \"Partager\",\n \"commonViewAll\": \"Voir Tout\",\n ...\n}\nimport en from \"./en.json\";\nimport fr from \"./fr.json\";\nexport default {\n en,\n fr,\n};","language-and-region-subtags#Language and Region subtags":"If you would like to contribute a locale for a lanugage with a region subtag,\nplease use the - dash character to separate the language and region in the filename,\nexample fr-CA.json for Canadian French.You will need to adjust the import statement in the src/i18n/locales/index.ts file to include the new locale.\nimport en from \"./en.json\";\nimport fr from \"./fr.json\";\nimport frCA from \"./fr-CA.json\";\nexport default {\n en,\n fr,\n \"fr-CA\": frCA,\n};"}},"/docs":{"title":"Docs","data":{"":"UI component library for rapidly creating high-quality and accessible IIIF-fluent web interfaces.Clover IIIF is a suite of Manifest and Collection components combined with lower-level IIIF Presentation 3.0 API UI components. Clover IIIF has a focus on accessibility, customization and developer experience. You can use Clover IIIF to build your own custom IIIF-fluent web interfaces while still using the full power of the IIIF Presentation 3.0 API.","vision#Vision":"Implementation of the IIIF Presentation API does not need to be limited to a primary viewer. Using Clover IIIF breaks the model of a \"viewer\" and allows the IIIF Presentation API to be used as a front-end for any web application. This is possible because the IIIF Presentation API is a highly defined and interoperable specification for representing digital objects. This means that the IIIF Presentation API can be used to represent any digital object, not just images. This concept gives creation to highly interoperable web user interfaces.","key-features#Key Features":"Accessibility - All components lean on WAI-ARIA design patterns to ensure that they are accessible to all users.\nCustomization - All components are designed to be easily customized with CSS.\nDeveloper Experience - All components are built with developer experience in mind and are designed to be easily integrated into any web application."}},"/docs/label":{"title":"Label","data":{"":"The Label component is used to display the label of a resource. It is used in the following contexts: Manifest, Canvas, Range, Annotation, AnnotationPage, Collection, and Manifest. It is a string or an object with language keys and string values.\n\nCrossing the Pend d'Oreille - Kalispel","usage#Usage":"","react#React":"import { Label } from \"@samvera/clover-iiif/primitives\";\nconst CustomLabel = ({ label }) => {\n return ;\n};\nexport default CustomLabel;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tspan, h1, h2, h3, h4, h5, h6, p, label, dt, dd\tspan\t--\tlabel\tlabel\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The Label component can be rendered as span, h1, h2, h3, h4, h5, h6, p, label, dt, or dd. The default is span.\n\n
Self-Portrait Dedicated to Paul Gauguin","html-attributes#HTML Attributes":"Label, 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.\n\n\n Self-Portrait Dedicated to Paul Gauguin\n","language#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.\n\n\n Notes des réunions de mise en scène et d'environnement\n"}},"/docs/partOf":{"title":"PartOf","data":{"":"A containing resource that includes the resource that has the partOf property.\n\n
","usage#Usage":"","react#React":"import { PartOf } from \"@samvera/clover-iiif/primitives\";\nconst CustomPartOf = ({ partOf }) => {\n return ;\n};\nexport default CustomPartOf;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tol, ul\tul\t--\tpartOf\tpartOf\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The PartOf component can be rendered as either ol or ul elements. The default is ul.\n\n\n
\n"}},"/docs/rendering":{"title":"Rendering","data":{"":"The Rendering component is used to display a list of alternate formats related to a resource. Whereas SeeAlso is used\nto link to a machine-readable resource such as metadata, the Rendering component alerts users that the resource is\navailable in another format such as PDF or ePub or has a related format. Because of the wide variety of formats that\nresources can be available in, the Rendering component is flexible and be of any media type and contain any type of\ndata.\n\n
\n
\n \n PDF version\n \n
\n
","usage#Usage":"","react#React":"import { Rendering } from \"@samvera/clover-iiif/primitives\";\nconst CustomRendering = ({ rendering }) => {\n return ;\n};\nexport default CustomRendering;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tol, ul\tul\t--\trendering\trendering\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The Rendering component can be rendered as either ol or ul elements. The default is ul.\n\n\n
\n"}},"/docs/requiredStatement":{"title":"RequiredStatement","data":{"":"The RequiredStatement component renders the required statement for a IIIF resource. The required statement is a human readable label and value pair that describes the rights status of the resource.\n\n
\n
\n
Attribution
\n
\n Courtesy of Northwestern University Libraries, The images on this web\n site are from material in the collections of the Charles Deering\n McCormick Library of Special Collections of Northwestern University\n Libraries, are provided for use by its students, faculty and staff,\n and by other researchers visiting this site, for research consultation\n and scholarly purposes only. Further distribution and/or any\n commercial use of the images from this site is not permitted.\n
\n
\n
","usage#Usage":"","react#React":"import { RequiredStatement } from \"@samvera/clover-iiif/primitives\";\nconst CustomRequiredStatement = ({ requiredStatement }) => {\n return ;\n};\nexport default CustomRequiredStatement;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tdl\tdl\t--\trequiredStatement\trequiredStatement\t--\tYes\tcustomValueDelimiter\tstring?\t,\t--\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","html-attributes#HTML Attributes":"RequiredStatement, 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.\n In Copyright: This Item is protected by copyright and/or related rights. You are free to use this Item in any way that is permitted by the copyright and related rights legislation that applies to your use. For other uses you need to obtain permission from the rights-holder(s). ',\n ],\n },\n }}\n className=\"custom-class\"\n/>\n
\n
\n
Rights
\n
\n \n \n \n \n \n \n \n In Copyright: This Item is protected by copyright and/or related rights. You are free to use this Item in any way that is permitted by the copyright and related rights legislation that applies to your use. For other uses you need to obtain permission from the rights-holder(s).\n \n \n
\n
\n
","language#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.\n\n
\n
\n
\n Kreditering\n
\n
\n Tilgjengeliggjort av Universitetsbiblioteket i Bergen\n
\n
\n
","custom-delimiter#Custom Delimiter":"\n
\n
\n
Attribution
\n
\n Courtesy of Northwestern University Libraries. The images on this web\n site are from material in the collections of the Charles Deering\n McCormick Library of Special Collections of Northwestern University\n Libraries, are provided for use by its students, faculty and staff,\n and by other researchers visiting this site, for research consultation\n and scholarly purposes only. Further distribution and/or any\n commercial use of the images from this site is not permitted.\n
\n
\n
"}},"/docs/scroll":{"title":"Scroll","data":{"":"A UI component rendering a vertical scrolling articles that output individual Canvases, basic descriptive properties, and Annotations with commenting motivations with support for transcribing and translating motivations.","features#Features":"Provide a IIIF Presentation API Manifest and the component:\nRenders the Canvases of a IIIF Manifest as HTML5 article elements\nOutputs Annotation textual content along with OpenSeadragon for images\nSupports vertical scrolling and textual discovery with a fixed Search... input","installation#Installation":"npm install @samvera/clover-iiif\n yarn add @samvera/clover-iiif\n pnpm install @samvera/clover-iiif","usage#Usage":"","react#React":"Add the Scroll component to your jsx or tsx code.\nimport Viewer from \"@samvera/clover-iiif/scroll\";\nRender Scroll with a IIIF Manifest URI. The only required prop is the iiifContent, which is the URI of the IIIF Manifest.\n","nextjs#Next.js":"Implementation with Next.js requires a dynamic import utilizing next/dynamic. This is due to Next's node compilation method creating issue with an OpenSeadragon (a dependency of Clover IIIF) assumption of a browser document object.\nimport dynamic from \"next/dynamic\";\nconst Scroll = dynamic(\n () => import(\"@samvera/clover-iiif\").then((Clover) => Clover.Scroll),\n {\n ssr: false,\n },\n);\nconst MyCustomScroll = () => {\n const iiifContent =\n \"https://digital.lib.utk.edu/assemble/manifest/civilwar/5390\";\n return ;\n};","api-reference#API Reference":"Scroll can configured through an options prop, which will serve as a object for common options.\nProp\tType\tRequired\tDefault\tiiifContent\tstring\tYes\t\toptions\tobject\tNo\t\toptions.offset\tnumber\tNo\t0\toptions.figure\tSee Figure\tNo\t\toptions.language\tSee Language\tNo","offset#Offset":"The options.offset refers to the number of pixels to offset the fixed Search... input when scrolling vertically. This is useful when the Scroll is rendered within a page with a fixed header.\n","figure#Figure":"The Scroll component renders a figure element for each Canvas. The options.figure object allows for customization of the figure width, aspect ratio, and display. This can be useful for customizing the Scroll component to fit within a specific layout alongside other image viewers.\nProp\tType\tRequired\tDefault\toptions.figure.aspectRatio\tnumber\tNo\t1.618 Golden Ratio\toptions.figure.display\tthumbnail, image-viewer\tNo\timage-viewer\toptions.figure.width\tstring CSS\tNo\t38.2%\t\n","language#Language":"The options.language object allows for the configuration of the language options for the Scroll component. This includes the default languages and language options.By default, the options.language object is not set, and the Scroll component will not display any language options. When the options.language object is set, the Scroll component will display a language dropdown that allows users to filter the content by languages within the Manifest annotation body resources. If defaultLanguages are not set, the Scroll component will display all languages available in the Manifest.The options.language.options array should be an array of objects with key-value pairs where the key is the language code and the value is the language name. The language code should match the language code in the Manifest annotation body resources.\nProp\tType\tRequired\tDefault\toptions.language.defaultLanguages\tstring[]\tNo\t[]\toptions.language.enabled\tboolean\tYes\tfalse\toptions.language.options\tArray<[key: string]: string>\tNo\t[]\t\n"}},"/docs/scroll/demo":{"title":"Demo","data":{"scroll#Scroll":"A UI component rendering vertical scrolling articles that output individual Canvases, basic descriptive properties, and Annotations with commenting motivations with support for transcribing and translating motivations."}},"/docs/seeAlso":{"title":"SeeAlso","data":{"":"The SeeAlso component is used to display a list of related resources. A machine-readable resource such as an XML or RDF description that is related to the current resource that has the seeAlso property. The resource may be of any media type, and contain any type of data.\n\n
","usage#Usage":"","react#React":"import { SeeAlso } from \"@samvera/clover-iiif/primitives\";\nconst CustomSeeAlso = ({ seeAlso }) => {\n return ;\n};\nexport default CustomSeeAlso;","api-reference#API Reference":"Prop\tType\tDefault\tRequired\tas\tol, ul\tul\t--\tseeAlso\tseeAlso\t--\tYes\tclassName\tstring, undefined\t--\t--\tstyle\tCSSProperties, undefined\t--\t--\tlang\tstring, undefined\t--\t--\ttitle\tstring, undefined\t--\t--\tdata-*\tstring, undefined\t--\t--\taria-*\tAriaAttributes, undefined\t--\t--","custom-element#Custom Element":"The SeeAlso component can be rendered as either ol or ul elements. The default is ul.\n\n\n
![](\"https://rightsstatements.org/files/buttons/InC.dark-white-interior-blue-type.svg\"/)
![](\"https://rightsstatements.org/files/buttons/InC.dark-white-interior-blue-type.svg\")
\n \n \n