# @annotation-studio/plugin-viewer

> OSD or Static Image Viewer plugin

Latest version **1.0.0-rc.35** (published 2020-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @annotation-studio/plugin-viewer
pnpm add @annotation-studio/plugin-viewer
yarn add @annotation-studio/plugin-viewer
bun add @annotation-studio/plugin-viewer
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-rc.35 |
| Published | 2020-12-15 |
| First published | 2018-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | stephenwf |

## Links

- npm: https://www.npmjs.com/package/@annotation-studio/plugin-viewer
- npm.io page: https://npm.io/package/@annotation-studio/plugin-viewer

## Dependencies (2)

- [react-rnd](https://npm.io/package/react-rnd.md) ^4.2.2
- [react-measure](https://npm.io/package/react-measure.md) ^1.4.7

## Recent versions

- 1.0.0-rc.35 (latest) — 2020-12-15
- 1.0.0-pr.49dda181 (pr-243) — 2020-06-09
- 1.0.0-next.644db3e6 (next) — 2020-06-09
- 1.0.0-pr.ebf6b780 (pr-251) — 2020-06-09
- 1.0.0-pr.8cceea49 (pr-250) — 2020-06-09
- 1.0.0-pr.4efd4e24 (pr-249) — 2020-06-09
- 1.0.0-pr.8a388d82 (pr-248) — 2020-06-09
- 1.0.0-pr.173fc20b (pr-247) — 2020-06-09
- 1.0.0-pr.1a398d7e (pr-246) — 2020-06-09
- 1.0.0-pr.5f045d7b (pr-245) — 2020-06-08
- 1.0.0-pr.fd7c0f46 (pr-244) — 2020-06-08
- 1.0.0-pr.344a89e8 (pr-242) — 2019-06-06
- 1.0.0-pr.57a66308 (pr-241) — 2019-06-06
- 1.0.0-pr.c5eaabb1 (pr-240) — 2019-03-27
- 1.0.0-pr.745a720b (pr-238) — 2019-03-20
- … 166 more at https://npm.io/package/@annotation-studio/plugin-viewer/versions

## README

# Annotation Studio - Viewer plugin
This is the Open Seadragon or static image viewer component. 

### Usage
To use the plugin you need to add it as a dependency along with the core plugin:
```
$ npm i @annotation-studio/plugin-viewer @annotation-studio/plugin-core --save-dev
```

Then in your code (ES6 in this example)

```jsx harmony
import CorePlugin from '@annotation-studio/plugin-core';
import ViewerPlugin from '@annotation-studio/plugin-viewer';

// We need the core plugin.
const core = CorePlugin(
  document.getElementById('myContainer'),
  {
    resourceTemplates: '...',
    manifest: '...',
    canvas: '...',
    elucidateServer: '...',
  }
);

// We need to wait for the store to be available.
core.then(store => {
  ViewerPlugin(
    document.getElementById('viewer'),
    {
      viewer: 'OpenSeadragon', // or StaticImageViewer
      // Actual size, will get re-sized.
      height: 6400,
      width: 4800,
    },
    store
  );
  return store;
});
```

Your HTML should also have a fallback image:
```html
<div id="viewer">
    <img src="..." height="480" width="640"/>
</div>
```

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