Wondering what’s next for npm?Check out our public roadmap! »

    openseadragon-react-viewer

    2.2.1 • Public • Published

    OpenSeadragonViewer

    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

    yarn add openseadragon-react-viewer
    
    // And peer dependencies
    yarn add @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: false,
        showToolbar: true,
        deepLinking: true,
        height: 800,
      };
    
      // A local manifest will take precedence over manifestUrl if both props are supplied
      return (
        <OpenSeadragonViewer manifest={manifest} manifestUrl={manifestUrl} options={options} />
      );
    }
    
    export default App;
    

    Options / Props

    Props the component accepts:

    • manifest - {object} IIIF manifest
    • manifestUrl - {string} IIIF manifest url
    • options - {object} An options config object whether to use custom features or OpenSeadragon features

    View full configuration options and a playground.

    Custom styling

    CSS class names are provided for elements which allow for custom styling overrides.

    For example, to change the style of the title in the viewer, in your CSS define something like:

    .osrv-work-title {
      color: green;
      font-family: "Verdana";
      font-size: 2rem;
    }
    

    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

    yarn install
    

    Start development environment

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

    yarn 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:

    yarn test
    

    To run tests in watch mode:

    yarn test:watch
    

    Styleguidist development

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

    yarn dev
    // or
    yarn styleguide
    

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

    yarn styleguide:build
    

    Deployment

    To deploy your forked version of this repo, run:

    yarn 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 PR for this project, branch off master and create a feature branch. Submit your PR to https://github.com/samvera-labs/openseadragon-react-viewer. You're awesome. Thanks!

    Code style

    Use Prettier.

    .prettierrc file contains current project coding style settings.

    Built With

    • OpenSeadragon - OpenSeadragon
    • IIIF - IIIF International Image Interoperability Framework
    • React - JavaScript component library
    • Rollup - JavaScript Bundler
    • Jest - Testing framework
    • Emotion - CSS in JS

    Authors

    License

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

    Keywords

    none

    Install

    npm i openseadragon-react-viewer

    DownloadsWeekly Downloads

    168

    Version

    2.2.1

    License

    ISC

    Unpacked Size

    438 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar