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'exportdefaultfunctionApp(){return(<GameComponentconfig={{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'exportdefault()=>{constemit=useEventEmitter('BUTTON_CLICK_EVENT')return<buttononClick={()=>emit('Click!')}>Emit</button>}

The useEventListener hook can help you handle game events in your React components.

import{useEventListener}from'phaser-react-tools'exportdefault()=>{useEventListener('BUTTON_CLICK_EVENT',(event)=>{console.log(event)})}

Next steps

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.