https://github.com/shixiongfei/phaser3-reactdom

Using React in the Phaser3 engine
https://github.com/shixiongfei/phaser3-reactdom

phaser3 phaser3-plugin react

Last synced: 6 days ago
JSON representation

Using React in the Phaser3 engine

• Host: GitHub
• URL: https://github.com/shixiongfei/phaser3-reactdom
• Owner: shixiongfei
• License: apache-2.0
• Created: 2023-11-19T06:04:00.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-04-12T15:44:50.000Z (6 months ago)
• Last Synced: 2024-09-25T23:08:14.356Z (10 days ago)
• Topics: phaser3, phaser3-plugin, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/phaser3-reactdom
• Size: 95.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# phaser3-reactdom

[![NPM Version](https://img.shields.io/npm/v/phaser3-reactdom)](https://www.npmjs.com/package/phaser3-reactdom)

Using React in the Phaser3 engine

### Configure phaser3-reactdom plugin

```JavaScript

import { PhaserReact, PhaserSceneReact } from "phaser3-reactdom";

const game = new Phaser.Game({

  // ...

  dom: { createContainer: true },

  // ...

  plugins: {

    global: [

      // ...

      {

        key: "phaser3-reactdom",

        plugin: PhaserReact,

        start: true,

      }

    ],

    scene: [

      // ...

      {

        key: "phaser3-reactdom-scene",

        plugin: PhaserSceneReact,

        start: true,

      }

    ],

    // ...

  },

  // ...

})

```

### Using React

```JavaScript

class ExampleScene extends Phaser.Scene {

  // ...

  create() {

    // The topUI will not be destroyed during scene destruction.

    const topUI = this.add.reactDom(ComponentTopUI, { state: ... });

    // ...

    // The sceneUI will be destroyed simultaneously as the scene is destroyed.

    this.sceneUI = this.add.sceneReactDom(ComponentSceneUI, { state: ... });

    // ...

  }

  // ...

  updateSceneUIState() {

    // Setting new state

    this.sceneUI.setState({ state: ... })

  }

}

```