{"id":14971113,"url":"https://github.com/neki-dev/phaser-react-ui","last_synced_at":"2025-10-26T14:31:05.266Z","repository":{"id":180730516,"uuid":"665432693","full_name":"neki-dev/phaser-react-ui","owner":"neki-dev","description":"🧩 React interface render for Phaser engine","archived":false,"fork":false,"pushed_at":"2024-07-15T17:35:24.000Z","size":3783,"stargazers_count":20,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-31T20:18:19.483Z","etag":null,"topics":["interface","phaser","react","render","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/neki-dev.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":"2023-07-12T07:36:17.000Z","updated_at":"2024-12-13T14:23:28.000Z","dependencies_parsed_at":"2024-07-15T21:23:49.649Z","dependency_job_id":null,"html_url":"https://github.com/neki-dev/phaser-react-ui","commit_stats":null,"previous_names":["neki-dev/phaser-react-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neki-dev%2Fphaser-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neki-dev%2Fphaser-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neki-dev%2Fphaser-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neki-dev%2Fphaser-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neki-dev","download_url":"https://codeload.github.com/neki-dev/phaser-react-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238347583,"owners_count":19456962,"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":["interface","phaser","react","render","ui"],"created_at":"2024-09-24T13:44:43.824Z","updated_at":"2025-10-26T14:31:05.260Z","avatar_url":"https://github.com/neki-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## ⚡ Phaser React UI\n[![Npm package version](https://badgen.net/npm/v/phaser-react-ui)](https://npmjs.com/package/phaser-react-ui)\n[![Small size](https://img.badgesize.io/neki-dev/phaser-react-ui/main/dist/index.js)](https://github.com/neki-dev/phaser-react-ui/blob/main/dist/index.js)\n[![Building](https://github.com/neki-dev/phaser-react-ui/actions/workflows/build.yml/badge.svg)](https://github.com/neki-dev/phaser-react-ui/actions/workflows/build.yml)\n\nLibrary for render relative game interface using React, connecting it with Phaser through events and context.\n\nUse special hooks for access to game and scenes.\n\nFor each scene can be create one interface instance, which is container for all components.\n\n.\n\nDocumentation\n\n* [Install](https://github.com/neki-dev/phaser-react-ui?tab=readme-ov-file#install)\n* [Integration](https://github.com/neki-dev/phaser-react-ui?tab=readme-ov-file#integration)\n* [Hooks](https://github.com/neki-dev/phaser-react-ui?tab=readme-ov-file#hooks)\n* [Components](https://github.com/neki-dev/phaser-react-ui?tab=readme-ov-file#components)\n* [Utils](https://github.com/neki-dev/phaser-react-ui?tab=readme-ov-file#utils)\n* [Example](https://github.com/neki-dev/phaser-react-ui?tab=readme-ov-file#example)\n\n.\n\n\n## Install\n\n```sh\nnpm i phaser-react-ui\n```\n\n.\n\n## Integration\n#### Add interface to scene\n```ts\nconst ui = new Interface(scene: Phaser.Scene)\n\nconsole.log(ui.container) // HTMLDivElement\n```\n\n#### Interface render\n```ts\nui.render(\n  component: React.FC, \n  props?: object\n)\n```\n\n#### Interface events\n```ts\nscene.events.on(Phaser.Interface.Events.MOUNT, () =\u003e {\n  console.log('component mounted');\n})\n```\n\n#### Toggle interface interactive\n```ts\nui.setInteractive(state: boolean)\n```\n* Default: `true`\n* You can toggle interactive for certain interface elements by CSS-property `pointer-events`\n\n#### Remove interface from scene\n```ts\nui.destroy()\n```\n* When scene is closed, the interface is destroyed automatically\n\n.\n\n## Hooks\n#### Get game instance\n```ts\nuseGame(): Phaser.Game\n```\n\n#### Get scene\n  * Get scene in which interface was created\n```ts\nuseCurrentScene(): Phaser.Scene\n```\n  * Get scene by key\n```ts\nuseScene(key: string): Phaser.Scene\n```\n\n#### Subscribe to scene update\n```ts\nuseSceneUpdate(\n  scene: Phaser.Scene, \n  callback: () =\u003e void, \n  depends: any[]\n)\n```\n\n#### Subscribe to event\n```ts\nuseEvent(\n  emitter: Phaser.Events.EventEmitter, \n  event: string,\n  callback: () =\u003e void, \n  depends: any[]\n)\n```\n\n#### Get actual value from event\n```ts\nuseEventValue(\n  emitter: Phaser.Events.EventEmitter, \n  event: string,\n  defaultValue: T\n)\n```\n\n#### Position relative to camera\n```ts\nuseRelativePosition(params: { \n  x: number,\n  y: number,\n  camera?: Phaser.Cameras.Scene2D.Camera\n}): React.MutableRefObject\u003cHTMLElement\u003e\n```\n\n#### Scale relative to canvas size\n```ts\nuseRelativeScale(params: { \n  target: number, \n  min?: number,\n  max?: number,\n  round?: boolean\n}): React.MutableRefObject\u003cHTMLElement\u003e\n```\n\n#### Get texture source image\n```ts\nuseTexture(key: string): HTMLImageElement\n```\n\n#### Get actual media query result\n```ts\nuseMatchMedia(query: string): boolean\n```\n\n#### Check if platform is mobile\n```ts\nuseMobilePlatform(): boolean\n```\n\n#### Use adaptive click event on target element\n```ts\nuseClick(\n  ref: React.RefObject,\n  type: 'up' | 'down',\n  callback: Function,\n  depends: any[]\n)\n```\n\n#### Use adaptive click event outside target element\n```ts\nuseClickOutside(\n  ref: React.RefObject,\n  callback: Function,\n  depends: any[]\n)\n```\n\n#### Use adaptive interaction flow\n```ts\nuseInteraction(\n  ref: React.RefObject,\n  callback?: Function,\n  depends?: any[]\n): boolean\n```\n\n.\n\n\n## Components\n#### Position relative to camera\n```ts\n\u003cRelativePosition \n  x={number} \n  y={number} \n  camera={Phaser.Cameras.Scene2D.Camera?}\n\u003e\n  ...\n\u003c/RelativePosition\u003e\n```\n\n#### Scale relative to canvas size\n```ts\n\u003cRelativeScale \n  target={number} \n  min={number?} \n  max={number?} \n  round={boolean?}\n\u003e\n  ...\n\u003c/RelativeScale\u003e\n```\n\n#### Render texture image\n```ts\n\u003cTexture name={string} /\u003e\n```\n\n.\n\n## Utils\n#### Safe rerender utils\n```ts\nifModifiedObject(\n  newValue: T, \n  keys?: (keyof T)[]\n): (currentValue: T) =\u003e T\n```\n```ts\nifModifiedArray(\n  newValue: T[], \n  keys?: (keyof T)[]\n): (currentValue: T[]) =\u003e T[]\n```\n```ts\nconst Component: React.FC = () =\u003e {\n  const scene = useCurrentScene();\n  const [data, setData] = useState({});\n\n  useSceneUpdate(scene, () =\u003e {\n    const newData = scene.getSomeData();\n    // Rerender only if newData is different by data\n    setList(ifModifiedObject(newData))\n  }, []);\n};\n```\n\n.\n\n## Example\n#### Create interface component\n```ts\nimport { useScene, useSceneUpdate, useEvent } from 'phaser-react-ui';\n\nconst PlayerHealth: React.FC = () =\u003e {\n  const world = useScene('world');\n\n  const [health, setHealth] = useState(0);\n  const [isAlive, setAlive] = useState(true);\n\n  useSceneUpdate(world, () =\u003e {\n    if (isAlive) {\n      setHealth(world.player.health);\n    }\n  }, [isAlive]);\n\n  useEvent(world.player, Phaser.GameObjects.Events.DESTROY, () =\u003e {\n    setAlive(false);\n  }, []);\n\n  return isAlive \u0026\u0026 (\n    \u003cdiv className='info'\u003e\n      {health} HP\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Create components container\n```ts\nimport { useRelativeScale } from 'phaser-react-ui';\nimport { PlayerHealth } from './PlayerHealth';\n\nconst ScreenUI: React.FC\u003cProps\u003e = () =\u003e {\n  const ref = useRelativeScale\u003cHTMLDivElement\u003e({\n    target: 1280,\n    min: 0.6,\n    max: 1.2,\n  });\n\n  return (\n    \u003cdiv ref={ref} className='container'\u003e\n      \u003cPlayerHealth /\u003e\n      ...\n    \u003c/div\u003e\n  );\n};\n\nScreenUI.displayName = 'ScreenUI';\n```\n\n#### Add interface to scene\n```ts\nimport { Interface } from 'phaser-react-ui';\nimport { ScreenUI } from './ScreenUI';\n\nclass Screen extends Phaser.Scene {\n  private ui: Interface;\n\n  create() {\n    this.ui = new Interface(this);\n    this.ui.render(ScreenUI);\n  }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneki-dev%2Fphaser-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneki-dev%2Fphaser-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneki-dev%2Fphaser-react-ui/lists"}