react-phaser

A library that maps Phaser objects onto React VDOM nodes, so React's render cycle adds, updates, or removes Phaser objects. It uses a React build stripped of DOM manipulation.

In react-phaser, Phaser objects are represented as React VDOM nodes, and the library reacts to VDOM changes by adding, updating, or removing Phaser objects. The README explains that react-phaser uses a React version unhooked from browser DOM manipulation. That is the core architectural choice of the project. In effect, React keeps its programming model and Phaser keeps its scene graph.

Requiring react-phaser provides the same object as requiring react, but when react-phaser is first loaded it removes the DOM manipulation functionality from React and injects the Phaser wrapper. React's render method is used as the interface for working with the Phaser scene, so existing React knowledge carries over to the game context. Render is a method added by react-phaser that initializes the React lifecycle for the passed element, and its second parameter, a string, identifies the virtual container where the game is rendered.

The README points to the example code as an implementation of the Phaser Making your first game tutorial, which shows how a standard Phaser tutorial maps onto the react-phaser model. That gives developers a concrete starting point using a familiar tutorial, and starting from a tutorial you already know removes one variable from the setup. The render call takes the game element plus a string that acts as the virtual container name for the Phaser scene.

The trick is real. react-phaser hands React's render method a string as the virtual container, and existing React knowledge carries straight over to the Phaser scene.

• Source 1 · Project repository
• Source 2 · README