By default, Phaser and React don't always get along. phaser-react-tools
is here to help.
You can use phaser-react-tools
to:
- Embed your Phaser game in a React application
- Build your game's UI with React
- Send events & data between Phaser and React
To install, run:
npm i phaser-react-tools
The GameComponent
is a HOC that can be configured just like a normal Phaser game.
import { GameComponent } from 'phaser-react-tools'
export default function App() {
return (
<GameComponent
config={{
backgroundColor: '000000',
height: 300,
width: 400,
scene: {
preload: function () {
console.log('preload')
},
create: function () {
console.log('create')
}
}
}}
>
{/* YOUR GAME UI GOES HERE */}
</GameComponent>
)
}
The useEventEmitter
hook can help you send messages from a React component to your Phaser game.
import { useEventEmitter } from 'phaser-react-tools'
export default () => {
const emit = useEventEmitter('BUTTON_CLICK_EVENT')
return <button onClick={() => emit('Click!')}>Emit</button>
}
The useEventListener
hook can help you handle game events in your React components.
import { useEventListener } from 'phaser-react-tools'
export default () => {
useEventListener('BUTTON_CLICK_EVENT', (event) => {
console.log(event)
})
}
Check out the /example
directory or visit the docs.
If you find a bug or have ideas for improvements, please create an issue and/or submit a pull request.