Phaser + R3F for React 19 —Laser
A lightweight integration layer for Phaser and React Three Fiber (R3F) in React 19 applications. It provides React hooks and components for embedding Phaser games and R3F scenes with a shared event bus, used across KBVE's browser games as the glue between the game canvas and the React tree.
Hybrid 2D/3D UIs
A shared LaserEventBus decouples communication between the Phaser and R3F layers, so 2D game canvases and 3D scenes stay wired to the same React tree.
- Peers — react/react-dom (>= 18), required.
- Optional — Phaser (>= 3.80), three (>= 0.160) + fiber/drei.
What it gives you
Features
Phaser integration
A PhaserGame component with ref-based access, a usePhaserGame context hook, and usePhaserEvent for subscribing to Phaser events.
React Three Fiber integration
A Stage component and a useGameLoop hook for frame-synced game logic.
Shared event bus
LaserEventBus for decoupled communication between the Phaser and R3F layers.
TypeScript-first
Full type definitions with exported types for configs, events, and geometry primitives.
Install & import
Usage
npm install @kbve/laserimport { PhaserGame, usePhaserEvent, Stage, useGameLoop, laserEvents,} from '@kbve/laser';Questions
Frequently asked
What is the Laser package?
Laser is a lightweight integration layer that embeds Phaser games and React Three Fiber (R3F) scenes inside React 19 applications, providing hooks, components, and a shared event bus for building hybrid 2D/3D game UIs.
What does Laser provide for Phaser and R3F?
For Phaser it exposes a PhaserGame component with ref access, a usePhaserGame context hook, and usePhaserEvent for event subscriptions. For R3F it provides a Stage component and a useGameLoop hook for frame-synced game logic.
What peer dependencies does Laser need?
Laser needs react and react-dom (>= 18). Phaser (>= 3.80) is optional for Phaser features, and three (>= 0.160) with @react-three/fiber and @react-three/drei is optional for R3F features — install only the ones you use.