phaser and react

Surprisingly phaser and react can work perfectly, for future reference I record the following:

We start off creating a Game component which is almost the place we position our canvas:

export function Game() {
  useEffect(() => {
    const config = {
      type: Phaser.AUTO,
      parent: "phaser-game",
      backgroundColor: 0xedf8f9,
      width: 800,
      height: 600,
      physics: {
        default: "arcade",
        arcade: {
          gravity: {
            y: 0
          }
        }
      },
      scene: [Example1, Example2, Example3, CVScene, TryAgain]
    };
    game = new Phaser.Game(config);

    function resize() {
      let canvas = document.querySelector("canvas");

      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      let windowRatio = windowWidth / windowHeight;
      let gameRatio = game.config.width / game.config.height;
      let container = document.getElementById("TopBar");
      container.style.width = 800 + "px";

      if (windowWidth <= 800) {
        if (windowRatio < gameRatio) {
          canvas.style.width = windowWidth + "px";
          canvas.style.height = windowWidth / gameRatio + "px";
          container.style.width = windowWidth + "px";
        } else {
          canvas.style.width = windowHeight * gameRatio + "px";
          canvas.style.height = windowHeight + "px";
          container.style.width = windowHeight * gameRatio + "px";
        }
      }
    }
    resize();
    window.addEventListener("resize", resize, false);
  });

  return <div></div>;
}

We need to enclose our Game component by a div element with id "phaser-game", by doing so our canvas will be built inside there. The resize function make our canvas responsive to the screen width. Also, Example1, Example2, Example3 are different scenes of the form:

import Phaser from "phaser";
export default class Example2 extends Phaser.Scene {
  constructor() {
    super({ key: "Example2" });
  }

  create() {}

  update() {}
}

Next the following are routine way of creating images, text, sprite, animations, etc:

this.load.spritesheet("door", door, {
  frameWidth: 270,
  frameHeight: 306
});

this.add.text(x, y, "text_to_show", { color: "0x00000" });

this.anims.create({
  key: "char2",
  frames: [{ key: "characters", frame: 13 }],
  frameRate: 10
});

this.door2Graphic = this.add
  .graphics()
  .fillStyle(0x00ff00, 0)
  .fillRect(435, 100, 145, 250);

this.tweens.add({
  targets: this.CV_container,
  duration: 500,
  x: { from: 220, to: -1000 },
  ease: "Linear"
});

game.scene.resume("Example1");