Openseadragon: Question: is there a plan to have an official reactjs support?

[Shaked]

Hey,

I have been using OSD for long time now and I'm planning to move the project to either ReactJS or go in a completely different direction and use https://svelte.dev/.

Before even getting into actual code, I wanted to see if there's a plan to support a ReactJS version of OSD?

Thank you
Shaked

[msalsbery]

I can’t imagine a React version of OpenSeadragon but a React component wrapper may be useful in some dev situations.

OpenSeadragon works well in React, and should be relatively easy to use in other Javascript frameworks as well

[Shaked]

I can’t imagine a React version of OpenSeadragon but a React component wrapper may be useful in some dev situations.

OpenSeadragon works well in React, and should be relatively easy to use in other Javascript frameworks as well

@msalsbery, I did see that OSD works well in React, but my main concern is how much work I'd have to put around it in order to make it work. I saw https://github.com/samvera-labs/openseadragon-react-viewer which seems to be quite big for a wrapper and my main concern is its maintenance.

[msalsbery]

@Shaked

The example link you showed may be very involved working with IIIF images, but using OpenSeadragon in React by itself doesn't take much, for example:

import React, { useEffect } from 'react';
import OpenSeadragon from 'openseadragon';
import './OpenSeadragonViewerComponent.scss';

function MouseTrackerPage(props) {
  useEffect(() => {
    let duomo = {
      Image: {
        xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
        Url: '//openseadragon.github.io/example-images/duomo/duomo_files/',
        Format: 'jpg',
        Overlap: '2',
        TileSize: '256',
        Size: {
          Width: '13920',
          Height: '10200'
        }
      }
    };

    let viewer = OpenSeadragon({
      id: 'seadragon-viewer',
      prefixUrl: '//openseadragon.github.io/openseadragon/images/',
      tileSources: duomo
    });

    // Cleanup (equal to componentWillUnmount)
    return () => {
      viewer.destroy();
      viewer = null;
    };
  }, []);

  return (
    <div id="seadragon-viewer" className="seadragon-viewer" />
  );
}

export default OpenSeadragonViewerComponent;

How much you add to that would be project-dependent, of course :)