Quick idea on how to provide a way for user to input their own manifest in the static build (and in dev environment)

dynamic-iiif-selector-pattern.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./index";

// NOTE: "env" is available via the DotEnv ES Build Plugin defined in serve.js
import { NODE_ENV, DEV_URL, STATIC_URL } from "env";

const host = NODE_ENV === "development" ? DEV_URL : STATIC_URL;
let sampleManifest: string = `${host}/fixtures/iiif/manifests/sample.json`;

const options: any = {
  ignoreCaptionLabels: ["Chapters"],
};

const Wrapper = () => {
  const [url, setUrl] = React.useState(sampleManifest);

  const handleChange = (e) => {
    console.log("HEY");
    setUrl(e.target.value);
  };

  return (
    <div>
      <App manifestId={url} options={options} key={url} />
      <input type="text" onChange={handleChange} />
    </div>
  );
};

ReactDOM.render(
  <Wrapper />,
  document.getElementById("root"),
);