{"id":15061036,"url":"https://github.com/benrosen/phaser-react-tools","last_synced_at":"2025-04-10T06:12:30.504Z","repository":{"id":55410199,"uuid":"323404192","full_name":"benrosen/phaser-react-tools","owner":"benrosen","description":"Toolkit for integrating Phaser and React.","archived":false,"fork":false,"pushed_at":"2024-03-28T01:59:45.000Z","size":845,"stargazers_count":24,"open_issues_count":2,"forks_count":11,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-18T11:25:15.904Z","etag":null,"topics":["phaser","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benrosen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-21T17:28:18.000Z","updated_at":"2024-06-24T15:18:50.000Z","dependencies_parsed_at":"2024-03-28T02:36:29.324Z","dependency_job_id":"e481f752-a991-47c7-aebd-9ef0764c677f","html_url":"https://github.com/benrosen/phaser-react-tools","commit_stats":{"total_commits":59,"total_committers":3,"mean_commits":"19.666666666666668","dds":0.05084745762711862,"last_synced_commit":"f534d61e737a525f9a222175cbe8caa6426b0736"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benrosen%2Fphaser-react-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benrosen%2Fphaser-react-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benrosen%2Fphaser-react-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benrosen%2Fphaser-react-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benrosen","download_url":"https://codeload.github.com/benrosen/phaser-react-tools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166925,"owners_count":21058481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["phaser","react"],"created_at":"2024-09-24T23:08:30.634Z","updated_at":"2025-04-10T06:12:30.474Z","avatar_url":"https://github.com/benrosen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# phaser-react-tools\n\n![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)\n\nBy default, [Phaser][1] and [React][2] don't always get along. `phaser-react-tools` is here to help.\n\nYou can use `phaser-react-tools` to:\n\n- Embed your Phaser game in a React application\n- Build your game's UI with React\n- Send events \u0026 data between Phaser and React\n\n## Quickstart\n\nTo install, run:\n\n`npm i phaser-react-tools`\n\n## Config\n\nThe `GameComponent` is a [HOC][3] that can be configured [just like a normal Phaser game][4].\n\n```jsx\nimport { GameComponent } from 'phaser-react-tools'\n\nexport default function App() {\n  return (\n    \u003cGameComponent\n      config={{\n        backgroundColor: '000000',\n        height: 300,\n        width: 400,\n        scene: {\n          preload: function () {\n            console.log('preload')\n          },\n          create: function () {\n            console.log('create')\n          }\n        }\n      }}\n    \u003e\n      {/* YOUR GAME UI GOES HERE */}\n    \u003c/GameComponent\u003e\n  )\n}\n```\n\n## Events\n\nThe `useEventEmitter` hook can help you send messages from a React component to your Phaser game.\n\n```jsx\nimport { useEventEmitter } from 'phaser-react-tools'\n\nexport default () =\u003e {\n  const emit = useEventEmitter('BUTTON_CLICK_EVENT')\n\n  return \u003cbutton onClick={() =\u003e emit('Click!')}\u003eEmit\u003c/button\u003e\n}\n```\n\nThe `useEventListener` hook can help you handle game events in your React components.\n\n```jsx\nimport { useEventListener } from 'phaser-react-tools'\n\nexport default () =\u003e {\n  useEventListener('BUTTON_CLICK_EVENT', (event) =\u003e {\n    console.log(event)\n  })\n}\n```\n\n## Next steps\n\nCheck out the `/example` directory or [visit the docs][5].\n\nIf you find a bug or have ideas for improvements, please [create an issue][6] and/or [submit a pull request][7].\n\n[1]: https://www.npmjs.com/package/phaser 'Phaser package'\n[2]: https://www.npmjs.com/package/react 'React package'\n[3]: https://reactjs.org/docs/higher-order-components.html 'Higher-order component'\n[4]: https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.GameConfig 'Phaser config docs'\n[5]: https://benrosen.github.io/phaser-react-tools 'phaser-react-tools docs'\n[6]: https://github.com/benrosen/phaser-react-tools/issues 'create an issue'\n[7]: https://github.com/benrosen/phaser-react-tools/pulls 'submit a pull request'\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenrosen%2Fphaser-react-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenrosen%2Fphaser-react-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenrosen%2Fphaser-react-tools/lists"}