https://github.com/benrosen/phaser-react-tools

Toolkit for integrating Phaser and React.
https://github.com/benrosen/phaser-react-tools

phaser react

Last synced: 3 months ago
JSON representation

Toolkit for integrating Phaser and React.

• Host: GitHub
• URL: https://github.com/benrosen/phaser-react-tools
• Owner: benrosen
• License: mit
• Created: 2020-12-21T17:28:18.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-03-28T01:59:45.000Z (9 months ago)
• Last Synced: 2024-09-30T06:24:08.872Z (3 months ago)
• Topics: phaser, react
• Language: JavaScript
• Homepage:
• Size: 825 KB
• Stars: 24
• Watchers: 0
• Forks: 13
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# phaser-react-tools

![npm](https://img.shields.io/npm/v/phaser-react-tools) ![Maintenance](https://img.shields.io/maintenance/yes/2021) ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/benrosen/phaser-react-tools) ![GitHub last commit](https://img.shields.io/github/last-commit/benrosen/phaser-react-tools) ![NPM](https://img.shields.io/npm/l/phaser-react-tools) ![GitHub issues](https://img.shields.io/github/issues-raw/benrosen/phaser-react-tools) ![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/benrosen/phaser-react-tools) ![GitHub language count](https://img.shields.io/github/languages/count/benrosen/phaser-react-tools) ![GitHub top language](https://img.shields.io/github/languages/top/benrosen/phaser-react-tools) ![npm](https://img.shields.io/npm/dw/phaser-react-tools)

By default, [Phaser][1] and [React][2] 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][3] that can be configured [just like a normal Phaser game][4].

```jsx

import { GameComponent } from 'phaser-react-tools'

export default function App() {

  return (

    

      {/* YOUR GAME UI GOES HERE */}

    

  )

}

```

## Events

The `useEventEmitter` hook can help you send messages from a React component to your Phaser game.

```jsx

import { useEventEmitter } from 'phaser-react-tools'

export default () => {

  const emit = useEventEmitter('BUTTON_CLICK_EVENT')

  return  emit('Click!')}>Emit

}

```

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

```jsx

import { useEventListener } from 'phaser-react-tools'

export default () => {

  useEventListener('BUTTON_CLICK_EVENT', (event) => {

    console.log(event)

  })

}

```

## Next steps

Check out the `/example` directory or [visit the docs][5].

If you find a bug or have ideas for improvements, please [create an issue][6] and/or [submit a pull request][7].

[1]: https://www.npmjs.com/package/phaser 'Phaser package'

[2]: https://www.npmjs.com/package/react 'React package'

[3]: https://reactjs.org/docs/higher-order-components.html 'Higher-order component'

[4]: https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.GameConfig 'Phaser config docs'

[5]: https://benrosen.github.io/phaser-react-tools 'phaser-react-tools docs'

[6]: https://github.com/benrosen/phaser-react-tools/issues 'create an issue'

[7]: https://github.com/benrosen/phaser-react-tools/pulls 'submit a pull request'