JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
<style>
#wrapperDiv {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script>
var params = {
appName: "graphing",
width: 800,
height: 600,
showToolBar: true,
showAlgebraInput: true,
showMenuBar: true,
}
var applet = new GGBApplet(params, true)
window.addEventListener("load", function () {
applet.inject("ggb-element")
updateGGBAppletSize()
})
window.addEventListener("resize", updateGGBAppletSize)
function updateGGBAppletSize() {
const wrapperDiv = document.getElementById("wrapperDiv")
const width = wrapperDiv.offsetWidth
const height = wrapperDiv.offsetHeight
ggbApplet.setSize(width, height)
console.log(width, height)
}
</script>
<div id="wrapperDiv">
<div id="ggb-element"></div>
</div>
</body>
</html>