mirador/src/components/IIIFResourceLabel.jsx

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import { useContext } from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import {
  getLocale,
} from '../state/selectors';
import LocaleContext from '../contexts/LocaleContext';

/**
 * Render the contextually appropriate label for the resource
 */
export function IIIFResourceLabel({ fallback, resource }) {
  const contextLocale = useContext(LocaleContext);
  const fallbackLocale = useSelector(state => getLocale(state, {}));

  if (!resource) return fallback;

  const label = resource.getLabel();

  if (!label) return fallback;

  return label.getValue(contextLocale || fallbackLocale || '') ?? (fallback || resource.id);
}

IIIFResourceLabel.propTypes = {
  fallback: PropTypes.string,
  resource: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};