MetadataDisplay Component

This component displays any metadata associated with the resource presented in a given IIIF Manifest via the metadata property. This component reads Manifest information from the central state provided by the Contexts, therefore it needs be always wrapped by IIIFPlayer component, which implements the state providers.

If the metadata fields include any HTML tags, this component renders them accordingly displaying only the accepted HTML tags and attributes as specified in the IIIF Presentation 3.0 spec to avoid HTML or script injection attacks.

From IIIF Presentation 3.0 spec;

• Allow HTML tags, a, b, br, i, img, p, small, span, sub, and sup
• Disallow attributes other than href on the a tag, src and alt on the img tag
• Remove all href attributes that start with the strings other than http:, https:, and mailto:.

Props Explained

There are 2 props the component accepts to adjust the display according to the user preference;

• displayTitle (Boolean): this has a default value of true and is not required. This allows to hide the title in the MetadataDisplay component if it's included in the metadata of the IIIF manifest. In some use-cases where the title is already visible in some other part of the page, this can be used to avoid displaying the title in multiple places.

• showHeading (Boolean): this has a default value of true and is not required. This enables to hide the Details heading on top of the component allowing to customize the user interface.

How to use the MetadataDisplay component?

Using with the IIIFPlayer:

import {
  IIIFPlayer,
  MetadataDisplay
} from '@samvera/ramp';
import 'video.js/dist/video-js.css';
import '@samvera/ramp/dist/ramp.css';

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MetadataDisplay />
</IIIFPlayer>

This will display the MetdataDataDisplay component with the default props, where both title within metadata and header for the panel get displayed on the page as below;

If it is preferred to not to display the header for the panel, it can be turned off by setting showHeading prop to false as follows;

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MetadataDisplay showHeading={false} />
</IIIFPlayer>

Similarly the title can be removed from within the MetadataDisplay component, if/when it is preferred to display the title in some other part of the page; by setting displayTitle prop's value to false.