npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

openseadragon-react-viewer

v3.6.0

Published

[![npm version](https://badge.fury.io/js/openseadragon-react-viewer.svg)](https://badge.fury.io/js/openseadragon-react-viewer)

Downloads

211

Readme

openseadragon-react-viewer

npm version

March 30, 2022:

Note this repository will be no longer be maintained by the original developers. We encourage all users to switch to clover-iiif, which will provide the same image viewing experience in OpenSeadragon, along with support for audio and video files in a single viewer.

Updated viewer

Image of OpenSeadragon React Viewer

A React wrapper component around the OpenSeadragon viewer. Feed OpenSeadragonViewer a IIIF manifest URL, and it will render an OpenSeadragon viewer with:

  • FontAwesome toolbar icons
  • A tile source dropdown navigation menu
  • Thumbnails navigation
  • Download options
  • Support for deep linking, and saving URL parameters

Installation and usage

npm install openseadragon-react-viewer

// And peer dependencies
npm install @emotion/react openseadragon react-device-detect react-select

Then use it in your app:

import React from "react";
import { OpenSeadragonViewer } from "openseadragon-react-viewer";

const App = () => {
  // Provide either a local IIIF manifest object
  const manifest = MY_AWESOME_MANIFEST;

  // Or, provide a publicly accessible URL of a IIIF manifest
  const manifestUrl = "https://some-manifest-url-here.json";

  // Options to show/hide extra UI features in the viewer
  // height(in pixels) option is default to 800 for wide-screens and 500 for narrow-screens
  // All other options default to 'true'
  const options = {
    showDropdown: true,
    showThumbnails: true,
    showToolbar: true,
    deepLinking: true,
    height: 800,
  };

  // Pass through any OpenSeadragon config options you'd like to override
  const openSeadragonOptions = {
    gestureSettingsMouse: {
      scrollToZoom: true,
    },
  };

  // Customize which tool bar controls are displayed
  const toolBarOptions = {
    showZoom: true,
    showFullScreen: true,
    showDownload: true,
    showPreviousNext: true,
  };

  // Note: A local manifest will take precedence over manifestUrl if both props are supplied
  return (
    <OpenSeadragonViewer
      manifest={manifest}
      manifestUrl={manifestUrl}
      options={options}
      openSeadragonOptions={openSeadragonOptions} // Optional
      toolBarOptions={toolBarOptions} // Optional
    />
  );
};

export default App;

Options / Props

View documentation for all configuration options.

Custom styling

View documentation for a list of CSS classes you can target to add custom styles.

Getting help

If you need help with openseadragon-react-viewer, submit an issue.

Cross-site Requests

** This info pulled from the Diva.js package**

You may receive an error that looks something like this:

XMLHttpRequest cannot load http://example.com/demo/imagefiles.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

This is a security precaution that all browsers use to prevent cross-site request forgeries. If you receive this message it is because your manifestUrl prop and the server used to serve the OpenSeadragon React Viewer are not at the same server address.

To fix this you must ensure that the OpenSeadragon React Viewer host's React application, and the location pointed to by the manifestUrl prop are being served by the same server, or you must create an exception using the Access-Control-Allow-Origin header on your server to explicitly white-list the manifestUrl location.

Development

Installing

  1. Clone or fork this repository

  2. Install project dependencies

npm install

Start development environment

To spin up the development environment (which is a Styleguidiest dev environment) run:

npm run dev

Visit http://localhost:6060/ (Styleguidist's default port) in your browser.

See rollup.config.js for development and packaging configuration details. Development environment runs from a UMD bundled file, which is saved to the /public folder for local development.

Running the tests

To run unit tests, with a full coverage report:

npm run test

To run tests in watch mode:

npm run test:watch

Styleguidist development

Styleguidist, in addition to providing documentation, also offers an isolated development environment. To run the environment and test it out:

npm run dev
// or
npm run styleguide

To build a static html version of the docs (which Github pages uses), run:

npm run styleguide:build

Deployment

To deploy your forked version of this repo, run:

npm run build

This will create CommoneJS, ES Module, and UMD distribution files located in the /dist/ directory.

Documentation

See the Styleguidist docs for documentation on the components.

Contributing

If you're working on a PR for this project, create a feature branch off of main.

This repository follows the Samvera Community Code of Conduct and language recommendations. Please do not create a branch called master for this repository or as part of your pull request; the branch will either need to be removed or renamed before it can be considered for inclusion in the code base and history of this repository.

Code style

Use Prettier.

.prettierrc file contains current project coding style settings.

Built With

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details