Getting mxGraph Hello World example working in React

I'm a mxGraph and React beginner and would like to get the mxGraph hello world example working in React, just to get a basic understanding of how I can work with mxGraph (and other third party libs).

I've started a new React project using create-react-app with the typescript template and installed mxGraph with yarn add mxgraph.

I haven't found any official typescript typings, so I'm not really sure how I should import the library to be able to start using it.

Trying to import it like this

import * as mxGraph from "mxgraph";

gives me

Could not find a declaration file for module 'mxgraph'.

Also tried

const mxGraph = require("mxgraph");

but that doesn't work either...

So I'm a little bit stumped and don't know how to even get started.

Can anyone help me get things rolling?

Thanks!

This is how I got it working. Not sure if it's entirely correct, but I guess it's a start.

import React, { useEffect, useRef } from "react";
import { mxGraph, mxRubberband, mxClient, mxUtils, mxEvent } from "mxgraph-js";

const App: React.FC = () => {
  const divGraph = useRef(null);

  useEffect(() => {
    if (!mxClient.isBrowserSupported()) {
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      mxEvent.disableContextMenu(divGraph.current);
      const graph = new mxGraph(divGraph.current);
      new mxRubberband(graph);
      const parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();

      try {
        const v1 = graph.insertVertex(parent, null, "Hello,", 20, 20, 80, 30);
        const v2 = graph.insertVertex(parent, null, "World!", 200, 150, 80, 30);
        const e1 = graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        graph.getModel().endUpdate();
      }
    }
  });

  return <div className="graph-container" ref={divGraph} id="divGraph" />;
};

export default App;