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
• Group
• ArcadeImage
• ArcadeSprite
• ArcadeCollider

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 official Phaser example)

Basic Platformer (recreated from official Phaser 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.