How to make friends React, OpenSeaDragon and plugin select to it?

Question

JavaScript

There is a not unknown OpenSeaDragon and actually launching it on React seems to be no problem.
There is also such a plugin for the "dragon".
I understand that in the original, the plugin is "mixed" with the "dragon" directly (through the prototype).
But in my case:

import OpenSeaDragon from 'openseadragon';
import OpenSeadragonSelection from 'openseadragonselection/dist/openseadragonselection.js';

...

  componentDidMount() {
    Axios.get(this.props.params.id + '/index.json').then(res => {
      viewer = OpenSeaDragon({
        id: "openseadragon1",
        prefixUrl: "/img/openseadragon/",
        tileSources: {
          type: 'image',
          url: res.data.src
        },
        debugMode: true,
      });
    }).catch(err => console.log(err));
  }

I will not give the whole code, but actually how can I slip the Selector into the "dragon"?

Answer 1

The casket just opened:

import OpenSeaDragon from 'openseadragon';
import OpenSeadragonSelection from 'openseadragonselection/dist/openseadragonselection.js';
OpenSeaDragon.selection = OpenSeadragonSelection;

Answer 2

Judging by the doc, "Include dist/openseadragonselection.js after OpenSeadragon in your html" is enough for you. (add openseadragonselection after your OpenSeadragon script). You seem to have done just that ..
I think it's worth trying without npm, just connect OpenSeadragon in index.html first, then OpenSeadragonSelection (using the scripts tag) and then create the viewer as you do in the question. If it works like this, then think further, or leave it like that. If this doesn’t work, then the question is not how to make React + OpenSeaDragon + plugin friends, but it’s worth creating a clean static index.html and writing an example from the documentation directly in the scripts tag to make sure that everything actually works.