MetadataDisplay Component

When there is a list of metadata available in a given IIIF Manifest, Ramp parses the metadata feed the values from the Manifest to the MetadataDisplay component via the central state management system using Contexts. Therefore this component must always be wrapped by IIIFPlayer component. If the metadata fields include any HTML tags, this component renders them accordingly allowing only 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

Props Explained

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

• displayTitle: accepts a Boolean value, which 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: accepts a Boolean value, which 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.