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
Prop | Type | Required? | Default |
---|---|---|---|
currentResourceId | string (Canvas URI) | -- | -- |
iiifContent | string (Manifest URI) | Yes | -- |
onResourceChanged | callback | -- | -- |
orientation | horizontal , vertical | -- | vertical |
overrides | object | -- | -- |
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>
</>
);
}