phaser-react-tools

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

Quickstart

To install, run:

npm i phaser-react-tools

Config

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>
  )
}

Events

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)
  })
}