Skip to main content

React.js Usage

Installation

First, be sure to install the @iiif/thumbnail-panel package.

npm i @iiif/thumbnail-panel

Components and Hooks

IIIFContentProvider

Wrapping React Context for the ThumbnailPanel component.

<IIIFContentProvider>
<ThumbnailPanel iiifContent="..." />
</IIIFContentProvider>

ThumbnailPanel

Primary UI component for @iiif/thumbnail-panel:

<ThumbnailPanel iiifContent="https://iiif-commons.github.io/fixtures/examples/thumbnail_panel/non_paged_at_end/v2/manifest.json" />

Props

PropTypeRequired?Default
currentResourceIdstring (Canvas URI)----
iiifContentstring (Manifest URI)Yes--
onResourceChangedcallback----
orientationhorizontal, vertical--vertical
overridesobject----

useThumbnailPanelContext()

React Hook for handling resource changes.

const { isEnd, isStart, next, prev } = useThumbnailPanelContext();

Example

import { IIIFContentProvider, ThumbnailPanel, useThumbnailPanelContext } from '@iiif/thumbnail-panel';

function MyApp() {
return (
<IIIFContentProvider>
<Controls />
<ThumbnailPanel
iiifContent="https://iiif-commons.github.io/fixtures/examples/thumbnail_panel/non_paged_at_end/v2/manifest.json"
orientation="horizontal"
/>
</IIIFContentProvider>
);
}

function Controls() {
const { isEnd, isStart, next, prev } = useThumbnailPanelContext();

const { handleNextClick, resourceId: nextResourceId } = next;
const { handlePrevClick, resourceId: prevResourceId } = prev;

return (
<>
<button onClick={handlePrevClick} disabled={isStart} data-id={prevResourceId}>
Prev
</button>
<button onClick={handleNextClick} disabled={isEnd} data-id={nextResourceId}>
Next
</button>
</>
);
}