Integrate guacamole-common-js in my react application

Question

I wanna use guacamole-common-js in my React application and already set up guaca in docker and guacamole client by guacamole-lite. I have successfully seen the view from plain HTML and javascript. However, I could not render it in React JSX. Here is my code:

import Guacamole from "guacamole-common-js";

let guaca = new Guacamole.Client(new Guacamole.WebSocketTunnel(webSocketFullUrl));
guaca.onerror = function (error) {
    alert(error);
};
guaca.connect();

// Disconnect on close
window.onunload = function () {
     guaca.disconnect();
}

let display = document.getElementById("display");
display.appendChild(guaca.getDisplay().getElement());

And to render it:

React.createElement("div", {id, "display"})

I also try with Ref like follow but still not works:

constructor(props) {
    super(props);
    this.displayRef = React.createRef();
    this.guacaRef = React.createRef();
}


this.guacaRef.current = new Guacamole.Client(new Guacamole.WebSocketTunnel(webSocketFullUrl));
this.guacaRef.current.onerror = function (error) {
    alert(error);
};
this.guacaRef.current.connect();

// Disconnect on close
window.onunload = function () {
    this.guacaRef.current.disconnect();
}

this.displayRef.current.appendChild(this.guacaRef.current.getDisplay().getElement());

To render it:

 <div ref={displayRef}/>

I'm new to it and any help will be appreciated.

Answer 1

Seems like the reason is kind of stupid... the default style for guacamole canvas rendering is {z-index: -1}. When adding up to 1, it renders properly.

Answer 2

As @Ivana stated, necessary to change z-index

const element = guaca.getDisplay().getElement();
const canvas = $(element).find(`canvas`);
for(let c of canvas) {
  $(c).css(`z-index`, 10)
};