Phaser Hooks Overview

React-like hooks for Phaser 3 game development with state management and lifecycle hooks.

Phaser Hooks

React-like hooks for Phaser 3 game development with state management and lifecycle hooks. Bring the power of React's component model to your Phaser games.

Explore Hooks View on GitHub

Key Features

🪝

React-like Hooks

Familiar hooks API for state management and side effects

🌍

Global State

Shared state management across scenes and components

🏠

Local State

Component-level state management with automatic updates

⚡

Lifecycle Hooks

useEffect, useUpdate, and other lifecycle management hooks

🎯

TypeScript Support

Full TypeScript support with type-safe hooks

🔄

Automatic Updates

Components automatically re-render when state changes

Available Hooks

🎮

useGame

Access the Phaser game instance and scene management

🌍

useGlobalState

Global state management across your entire game

🏠

useLocalState

Component-level state with automatic re-rendering

Quick Start

import { useGame, useGlobalState, useLocalState } from 'phaser-hooks';

class MyScene extends Phaser.Scene {
  create() {
    // Use hooks in your scene
    const game = useGame(this);
    const [score, setScore] = useGlobalState('score', 0);
    const [health, setHealth] = useLocalState(this, 'health', 100);
    
    // State updates automatically trigger re-renders
    setScore(score + 10);
    setHealth(health - 5);
  }
}

Installation

npm install phaser-hooks

Phaser Hooks brings React's powerful state management to Phaser 3, making your games more maintainable and easier to develop.