Can you run custom javascript tags inside a react component?

You will need to create an initialing function wrapper for the AwwBoard. The function will create and configure a script object. The AwwBoard function will return a promise to the caller, which will provide the AwwBoard instance for later use (to access its methods) once the javascript has executed.

We also want to pass config params as well as a mount Ref for the component.

To achieve this, I created the following function which takes a ref (for the div you want to mount the AwwBoard) as well as configuration params. It loads the script, and resolves the promise with the instance.

const AwwBoard = (mountRef: React.Ref, params: Object = {}) => {
  let promise = new Promise(function (resolve, reject) {
    var script = document.createElement("script");
    script.src = "https://awwapp.com/static/widget/js/aww3.min.js";

    script.onload = function () {
      //AwwBoard should be available on the window object after loading the script
      const { AwwBoard } = window;
      //create a new instance
      var aww = new AwwBoard(`#${mountRef.id}`, params);
      //resolve the promise and return the instance.
      resolve(aww);
    };

    document.getElementsByTagName("head")[0].appendChild(script);
  });

  return promise;
};

export default AwwBoard;

Now we set up a div with a react ref, and a useEffect which loads the AwwBoard on "componentDidMount"

import React, { useEffect } from "react";
import "./styles.css";
import AwwBoard from "./AwwBoard";

export default function App() {
  const awwBoardInstance = React.useRef(); //access methods on the board here
  const awwBoardMountRef = React.useRef(null); //mounting ref for the AwwBoard

  useEffect(() => {
    AwwBoard(awwBoardMountRef.current, {}).then((instance) => {
      awwBoardInstance.current = instance;
    });
  },[]);

  return (
    <div className="App">
      <div
        style={{ width: "600px", height: "400px" }}
        id="aww-wrapper"
        ref={awwBoardMountRef}
      ></div>
    </div>
  );
}

CodeSandbox