# react-phaser-fiber

> Create Phaser 3 games with React

Latest version **0.2.4** (published 2020-04-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-phaser-fiber
pnpm add react-phaser-fiber
yarn add react-phaser-fiber
bun add react-phaser-fiber
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2020-04-02 |
| First published | 2019-08-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 313.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 48 |
| Maintainers | mattjennings |
| Keywords | phaser, react |

## Links

- npm: https://www.npmjs.com/package/react-phaser-fiber
- Repository: https://github.com/mattjennings/react-phaser-fiber
- npm.io page: https://npm.io/package/react-phaser-fiber

## Dependencies (5)

- [fbjs](https://npm.io/package/fbjs.md) ^1.0.0
- [uuid](https://npm.io/package/uuid.md) ^3.3.3
- [phaser](https://npm.io/package/phaser.md) ^3.19.0
- [performance-now](https://npm.io/package/performance-now.md) ^2.1.0
- [react-reconciler](https://npm.io/package/react-reconciler.md) ^0.21.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.4 (latest) — 2020-04-02
- 0.3.0-beta.2 (next) — 2020-04-10
- 0.3.0-beta.1 — 2020-03-21
- 0.3.0-beta.0 — 2020-03-21
- 0.2.3 — 2020-02-18
- 0.2.2 — 2020-02-13
- 0.2.1 — 2020-02-13
- 0.2.0 — 2020-02-11
- 0.1.0 — 2020-02-11
- 0.0.7 — 2019-08-22
- 0.0.6 — 2019-08-22
- 0.0.5 — 2019-08-18
- 0.0.4 — 2019-08-18
- 0.0.3 — 2019-08-17
- 0.0.2 — 2019-08-17
- … 1 more at https://npm.io/package/react-phaser-fiber/versions

## README

# react-phaser-fiber

Create Phaser 3 games using React. Heavily inspired by [@inlet/react-pixi](https://github.com/inlet/react-pixi).

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

- [Game](https://photonstorm.github.io/phaser3-docs/Phaser.Game.html)
- [Scene](https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html)
- [Text](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html)
- [Image](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Image.html)
- [Sprite](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html)
- [Group](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html)
- [ArcadeImage](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Image.html)
- [ArcadeSprite](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Sprite.html)
- [ArcadeCollider](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Collider.html)

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](https://codesandbox.io/s/github/mattjennings/react-phaser-fiber/tree/master/examples/breakout) (recreated from [official Phaser example](https://labs.phaser.io/edit.html?src=src\games\breakout\breakout.js))

[Basic Platformer](https://codesandbox.io/s/github/mattjennings/react-phaser-fiber/tree/master/examples/basic-platformer) (recreated from [official Phaser example](https://labs.phaser.io/edit.html?src=src/physics/arcade/basic%20platform.js&v=3.22.0))

## Other

[Custom Phaser Component](https://codesandbox.io/s/github/mattjennings/react-phaser-fiber/tree/master/examples/custom-component)

[Spawning Components](https://codesandbox.io/s/github/mattjennings/react-phaser-fiber/tree/master/examples/spawner)

# Getting Started

## Install

```cli
npm install react-phaser-fiber
```

## Create a game

```jsx
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'))
```

[![Edit Hello World](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mattjennings/react-phaser-fiber/tree/master/examples/hello-world)

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

---
_Source: https://npm.io/package/react-phaser-fiber · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._