# Phaser Hooks - lightweight reactive state management for Phaser scenes

**URL:** <https://phaser.discourse.group/t/phaser-hooks-lightweight-reactive-state-management-for-phaser-scenes/15512>\
**Category:** Phaser 3\
**Created:** [October 29, 2025, 1:28am UTC](https://phaser.discourse.group/t/phaser-hooks-lightweight-reactive-state-management-for-phaser-scenes/15512 "2025-10-29T01:28:56Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![renatocassino](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/renatocassino/32/9089_2.png) [@renatocassino](https://phaser.discourse.group/u/renatocassino)\
**Post date:** [October 29, 2025, 1:28am UTC](https://phaser.discourse.group/t/phaser-hooks-lightweight-reactive-state-management-for-phaser-scenes/15512/1 "2025-10-29T01:28:56Z")

</div>

Hey everyone!

I’ve been working on a new open-source library called **Phaser Hooks**.

It’s a small, framework-free state management system built specifically for Phaser 3 (I don’t know yet about the compatibility with Phaser 4).

It lets you create reactive state directly inside your scenes, perfect for things like player health, score, or energy. Is inspired in React Hooks (but, without React)

```javascript
// hooks/player.ts (yes, I love Typescript, but you can use with JS only if you want
import * as Phaser from 'phaser';
import { withLocalState } from 'phaser-hooks';

const withPlayer = (scene: Phaser.Scene) => {
  const player = withLocalState(scene, 'player', {
    hp: 100,
    maxHp: 100,
    level: 1,
  });

  return player;
};

// Now, in all scenes you can get the same state
class GameScene extends Phaser.Scene {
  constructor() {
    super({key: 'GameSceneKey'});
  }

  create(): void {
    const playerState = withPlayer(this); // Get the state here
    // ...

    const hp = playerState.get().hp;

    playerState.on('change', (newValue, oldValue) => {
      if (newValue.hp !== oldValue.hp) {
        this.hpText.setText(`HP: ${newValue.hp}`);
      }
      // .....

```

**Github:** [phaser-toolkit/packages/phaser-hooks at main · renatocassino/phaser-toolkit · GitHub](https://github.com/renatocassino/phaser-toolkit/tree/main/packages/phaser-hooks#readme)

🔗 **Docs + live examples:** [https://toolkit.cassino.dev/phaser-hooks/start-here/installation/](https://toolkit.cassino.dev/phaser-hooks/start-here/installation/)  
📦 **NPM:** [https://www.npmjs.com/package/phaser-hooks](https://www.npmjs.com/package/phaser-hooks)

It integrates with the Phaser registry, automatically cleans up when scenes are destroyed, and works perfectly with TypeScript or plain JavaScript.

Feedback and ideas are very welcome!

_I’m already using it in my own games and it keeps my code a lot cleaner. I decided to put open source to share with the community._

Some games using this lib:

[https://gamedistribution.com/games/smart-dots-reloaded/](https://gamedistribution.com/games/smart-dots-reloaded/)

> **[Matrix Typer | Play Now Online for Free](https://gamemonetize.com/matrix-typer-game)**
>
> enjoy this fantastic game Matrix Typer !Matrix Typer is fast-paced typing challenge where every word is battle against time.
> Type falling codes before they hit system core — each correct word boosts your score and accuracy!
> Unlock new stages, improve...

> **[Coin Flick Soccer - Play Online for Free - Cassino.dev](https://games.cassino.dev/game/coin-flick-soccer/)**
>
> Finger Flick (a.k.a. Dedoball, Peg Game, or “Peteleco”) is a fast-paced physics game where you use your finger to flick a coin across the board, bounce off nails, and aim for goals. Known by many names around the world, this classic playground...