react-phaser-fiber

Create Phaser 3 games using React. Heavily inspired by @inlet/react-pixi.

This is very much a work in progress. The following components are provided (linked to their respective Phaser class):

• Game
• Scene
• Text
• Image
• Sprite
• ArcadeImage

The current goal is to support all GameObjects and Physics.Arcade objects. After that, I'll look at adding Matter and Impact components.

Examples

Games

Breakout (recreated from Phaser 3's official Breakout example)

Other

Custom Phaser Component

Spawning Components

Getting Started

Install

npm install react-phaser-fiber

Create a game

import React from 'react'
import ReactDOM from 'react-dom'
import { Game, Scene, Text } from 'react-phaser-fiber'

const App = () => {
  return (
    <Game width={400} height={400}>
      <Scene sceneKey="main">
        <Text x={100} y={100} text="Hello World!" style={{ color: 'white' }} />
      </Scene>
    </Game>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

There will be proper documentation eventually, but for now look through the examples to see what else is possible.