jskz / react-iiif-viewer

A React component for displaying high resolution IIIF images with deep zooming capabilities on mobile and desktop.

React IIIF Viewer

A React component library built on OpenSeadragon for displaying high resolution images with deep zooming capabilities on mobile and desktop. Check out the interactive Demo!

What is IIIF?

IIIF (pronounced “Triple-Eye-Eff”) is an open set of technical specifications that aim to provide uniformity to the way image-based resources are presented and delivered to end users.

IIIF images are delivered via a IIIF compatible image server. This server is responsible for breaking down large images into small tiles. The browser then makes requests for these tiles as the user zooms/pans around the image. As the user zooms in deeper, high resolution tiles are requested in order to maintain quality and performance. Fetched tiles are stitched together in real-time resulting in seamless user experience.

Where do I get these IIIF compatible images?

The Getty hosts thousands of images available for free use via their Open Content Program. Or, if you would like to create your own IIIF images, you can host a small number for free at iiifhosting.com.

Installation

Install via npm:

$ npm install react-iiif-viewer --save

Components

Viewer

A basic viewer that displays one image at a time.

import { Viewer } from "react-iiif-viewer"

<Viewer iiifUrl="https://data.getty.edu/museum/api/iiif/635494/info.json" />

prop	required	type	default	description
iiifUrl	yes	string	N/A	The IIIF image url to display. Changes to this prop will also update the currently displayed image.
width	no	string	800px	A css dimension for the width of the viewer (500px, 100%, etc.)
height	no	string	500px	A css dimension for the height of the viewer (500px, 100%, etc.)

MultiViewer

A viewer that displays a collection of IIIF images via an expandable/collapsable thumbnail drawer.

import { MultiViewer } from "react-iiif-viewer"

<MultiViewer iiifUrls={[
    "https://data.getty.edu/museum/api/iiif/635494/info.json",
    "https://data.getty.edu/museum/api/iiif/671108/info.json",
    "https://data.getty.edu/museum/api/iiif/194801/info.json",
    "https://data.getty.edu/museum/api/iiif/268179/info.json"
]}/>

prop	required	type	default	description
iiifUrls	yes	[string]	N/A	An array of IIIF image urls to display
width	no	string	800px	A css dimension for the width of the viewer (500px, 100%, etc.)
height	no	string	500px	A css dimension for the height of the viewer (500px, 100%, etc.)

Development

After cloning the repo, install its dependencies:

$ cd react-iiif-viewer
$ npm install

This project uses Parcel for bundling and running of a development server.

To run the demo application with hot reloading:

$ npm run start-demo

The unit tests are written using react-testing-library.

To run them:

$ npm test

Future Improvements

1. Implement custom full screen experience for iPhones since they don't yet support the Full Screen API
2. CI pipeline with automatic publishing to Github pages
3. Error states when image fails to load
4. Error states when unable to fetch certain thumbnails
5. Performance considerations when dealing with lots of images
6. Ability to provide extra OpenSeadragon configs
7. Add prettier code formatter
8. Provide ability to render with thumbnail drawer open initially