UV.tsx

UV.tsx

import React, { useRef, useLayoutEffect, useEffect, useState } from "react";
// @ts-ignore
import { init, Viewer } from "universalviewer";
import "../../assets/uv.css";
// @ts-ignore
import classNames from "classnames";

const UV = ({
  manifest,
  embedded = false,
  classes,
  width = "100vw",
  height = "100vh",
}: {
  manifest: string;
  embedded?: boolean;
  classes?: string | undefined;
  width?: string;
  height?: string;
}) => {
  const el = useRef<HTMLDivElement>(null);
  const uv = useRef<Viewer>(null);
  const refLoaded = useRef<boolean>(false);

  const [loaded, setLoaded] = useState<boolean>(false);

  useLayoutEffect(() => {
    refLoaded.current = false;
    setLoaded(false);

    if (manifest) {
      uv.current = init(el.current, {
        manifestUri: manifest,
        assetsDir: "/uv-assets",
        configUri: "/uv-config.json",
        embedded: embedded
      });

      uv.current.on("created", () => {
        if (uv.current) {
          setTimeout(() => {
            uv.current.resize();
          }, 250);
        }
      }, false);

      uv.current.on(
        "load",
        () => {
          if (el.current) {
            refLoaded.current = true;
            setLoaded(true);
            setTimeout(() => {
              uv.current.resize();
            }, 250);
          }
        },
        false
      );
    }

    // cleanup
    return () => {
      uv.current.on("created", () => {
        // do nothing
      });
      uv.current.on("load", () => {
        // do nothing
      });
    };
  }, [manifest]);

  const c = classNames("uv", classes, {
  });

  return (
    <div
      ref={el}
      id="uv"
      className={c}
      style={{
        width: width,
        height: height,
      }}
    />
  );
};

export default UV;

Use it like this:

import UV from "./UV";

const UVPage = () => {
  return <UV manifest={"manifest url"} />
}

Thanks Edward, that is similar to what I have been trying. Whenever I give "configUri" as an option, it stops rendering.
Here is the gist: https://gist.github.com/kdlogan19/504b55c1760ec914188eb36755030d66

import React, {
  useRef,
  useLayoutEffect } from "react";
import "./styles.css";
import { init } from "universalviewer";


const UV = ({manifest, width = '100vw', height = '100vh'}) => {
  const el = useRef();

  console.log(el)
  useLayoutEffect(() => {

    const uv = init(el.current,
      {
        manifestUri: manifest,
        dataLightbox:false,
        rotation: 0,
        configUri: "/config.json" // This is where I am experiencing issues. */
      });

    uv.on('created', () => {
      uv.resize();
    }, false);

  }, [manifest]);

  return <div ref={el} id="uv" className="uv" style={{
    width: width,
    height: height,
  }} />;
};

export default function App() {
  return (
    <UV manifest="https://wellcomelibrary.org/iiif/b18035723/manifest" data-lightbox="true" />
  );
} 

Is it throwing an error message? Is you config.json definitely in your public folder?

Oh, I was just placing the config file in the src directory, wasn't sure I had to place in public. Thanks a lot. It's working now.