# react-iiif-viewer

> A React component library built on [OpenSeadragon](https://openseadragon.github.io/) for displaying high resolution images with deep zooming capabilities on mobile and desktop. Check out the interactive [Demo](https://eslawski.github.io/react-iiif-viewer/

Latest version **1.0.2** (published 2020-03-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-iiif-viewer
pnpm add react-iiif-viewer
yarn add react-iiif-viewer
bun add react-iiif-viewer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-03-30 |
| First published | 2020-03-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | eslawski |

## Links

- npm: https://www.npmjs.com/package/react-iiif-viewer
- npm.io page: https://npm.io/package/react-iiif-viewer

## Dependencies (3)

- [uuid](https://npm.io/package/uuid.md) ^7.0.2
- [axios](https://npm.io/package/axios.md) ^0.19.2
- [openseadragon](https://npm.io/package/openseadragon.md) ^2.4.2

## Recent versions

- 1.0.2 (latest) — 2020-03-30
- 1.0.1 — 2020-03-28
- 1.0.0 — 2020-03-28

## README

# React IIIF Viewer

A React component library built on [OpenSeadragon](https://openseadragon.github.io/) for displaying high resolution images with deep zooming capabilities on mobile and desktop. Check out the interactive [Demo](https://eslawski.github.io/react-iiif-viewer/)!




![example](mask_example.gif)

### What is IIIF?

[IIIF](https://iiif.io/) (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](https://www.getty.edu/) hosts thousands of images available for free use via their [Open Content Program](http://www.getty.edu/about/whatwedo/opencontent.html). Or, if you would like to create your own IIIF images, you can host a small number for free at [iiifhosting.com](https://www.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](https://parceljs.org/) 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](https://github.com/testing-library/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](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
1. CI pipeline with automatic publishing to Github pages
1. Error states when image fails to load
1. Error states when unable to fetch certain thumbnails
1. Performance considerations when dealing with lots of images
1. Ability to provide extra OpenSeadragon configs
1. Add `prettier` code formatter
1. Provide ability to render with thumbnail drawer open initially

---
_Source: https://npm.io/package/react-iiif-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._