I have a requirement to use an SDK in a project that is built with React. The SDK is responsible for rendering UI by appending it as children to an HTMLElement it receives as input during initialization.

There are two issues that I haven't encountered before in React apps and wondering what the best way to go about it would be.

1: The SDK takes in an HTMLElement and not a ReactElement.

const mySDK = new fooSDK();

// create an empty container for the SDK to mount later
const myContainer = document.createElement('div');

// set the element for the SDK to render children to later
mySDK.setContainer(myContainer);

I know that using a ref here is an option, but the next issue affects the overall implementation.

2: The SDK requires setting a callback on the Window object, which the SDK calls when it is ready. The callback must encapsulate all the logic above.

const myModule = () => {
   const mySDK = new fooSDK();

   // create an empty container for the SDK to mount later
   const myContainer = document.createElement('div');

   // set the element for the SDK to render children to later
   mySDK.setContainer(myContainer);
};

And then used like this

window.sdkCallback = myModule;

This setup is quite un-idiomatic in React and using this particular SDK is a hard requirement. The React application serves the UI from an Express server so have a bit more control there.

One approach I'm entertaining is creating a new route in my express app, and handling this native DOM logic there.

Not sure if this is a good approach so open to any suggestions. It would be nice to wrap this logic into a React component or something for modularity, but even just getting it to work is a good start.

Thanks!