Documentation
RequiredStatement

RequiredStatement

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.

requiredStatement ↗ 
<RequiredStatement
  requiredStatement={{
    label: {
      none: ["Attribution"],
    },
    value: {
      none: [
        "Courtesy of Northwestern University Libraries",
        "The images on this web site are from material in the collections of the Charles Deering McCormick Library of Special Collections of Northwestern University Libraries, are provided for use by its students, faculty and staff, and by other researchers visiting this site, for research consultation and scholarly purposes only. Further distribution and/or any commercial use of the images from this site is not permitted.",
      ],
    },
  }}
/>

Usage

React

import { RequiredStatement } from "@samvera/clover-iiif/primitives";
 
const CustomRequiredStatement = ({ requiredStatement }) => {
  return <RequiredStatement requiredStatement={requiredStatement} />;
};
 
export default CustomRequiredStatement;

API Reference

PropTypeDefaultRequired
asdldl--
requiredStatementrequiredStatement (opens in a new tab)--Yes
customValueDelimiterstring?,--
classNamestring, undefined----
styleCSSProperties, undefined----
langstring, undefined----
titlestring, undefined----
data-*string, undefined----
aria-*AriaAttributes, undefined----

HTML Attributes

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

<RequiredStatement
  requiredStatement={{
    label: {
      en: ["Rights"],
    },
    value: {
      en: [
        '<span><a href="http://rightsstatements.org/vocab/InC/1.0/"><img src="https://rightsstatements.org/files/buttons/InC.dark-white-interior-blue-type.svg"/></a></span><br/><span><a href="http://rightsstatements.org/vocab/InC/1.0/">In Copyright</a>:  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).</span><br/>',
      ],
    },
  }}
  className="custom-class"
/>

Language

Additional to being rendered to the DOM like other attributes, the value of lang (opens in a new tab) will couple with InternationalString (opens in a new tab) 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 (opens in a new tab) language code.

<RequiredStatement
  requiredStatement={{
    label: {
      en: ["Attribution"],
      no: ["Kreditering"],
    },
    value: {
      en: ["Provided by University of Bergen Library"],
      no: ["Tilgjengeliggjort av Universitetsbiblioteket i Bergen"],
    },
  }}
  lang="no"
/>

Custom Delimiter

<RequiredStatement
  requiredStatement={{
    label: {
      none: ["Attribution"],
    },
    value: {
      none: [
        "Courtesy of Northwestern University Libraries",
        "The images on this web site are from material in the collections of the Charles Deering McCormick Library of Special Collections of Northwestern University Libraries, are provided for use by its students, faculty and staff, and by other researchers visiting this site, for research consultation and scholarly purposes only. Further distribution and/or any commercial use of the images from this site is not permitted.",
      ],
    },
  }}
  customValueDelimiter=". "
/>
PartOfSeeAlso