https://github.com/shixiongfei/phaser3-reactdom
Using React in the Phaser3 engine
https://github.com/shixiongfei/phaser3-reactdom
phaser3 phaser3-plugin react
Last synced: 4 months 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 (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-04-12T15:44:50.000Z (over 1 year ago)
- Last Synced: 2025-02-22T11:17:12.201Z (5 months 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
[](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: ... })
}
}
```