Viewer (Content State)

This is a helper page to demonstrate the retrieving the current IIIF Content State of a Viewer component.

Current Content State

This section displays the raw JSON and base64 encoded JSON of the IIIF Content State for this Viewer instance. Preview the current content state of the Viewer component, which includes information about the currently displayed canvas, zoom level, and other relevant details. This can be useful for debugging or for saving the state of the viewer.

Demo Usage

export const handleContentStateCallback = ({ encoded, json }) => {
  console.log({
    encoded, // base64 encoded JSON
    json, // raw JSON
  });
};
 
<Viewer
  contentStateCallback={handleContentStateCallback}
  options={{
    canvasHeight: "640px",
    openSeadragon: {
      gestureSettingsMouse: {
        scrollToZoom: false,
      },
    },
    showIIIFBadge: false,
  }}
/>;