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;

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.