pixijs / pixi-react

Write PIXI apps using React declarative style
https://pixijs.io/pixi-react/
MIT License
2.42k stars 180 forks source link

Bug: Events don't seem to work at all. #477

Closed benlesh closed 8 months ago

benlesh commented 8 months ago

Current Behavior

I can't seem to wire up an event to fire no matter what I do.

Expected Behavior

I should be able to get events for things like clicking Graphics, Containers, and Sprites.

Steps to Reproduce

I have a reproduction StackBlitz here

Basically, no matter what I do, I can't wire events up to the components. interactive prop doesn't seem to do anything. click is an available prop, but doesn't at all.

import viteLogo from '/vite.svg';

import { Stage, Sprite, Graphics } from '@pixi/react';
import { Graphics as PixiGraphics } from '@pixi/graphics';

import './App.css';

const draw = (g: PixiGraphics) => {
  g.clear();
  g.beginFill('red');
  g.drawRect(10, 10, 50, 50);
  g.endFill();
};

function App() {
  return (
    <>
      <Stage width={200} height={100}>
        <Graphics
          click={() => console.log('click prop')} // TypeScript likes this, but it does nothing
          onClick={() => { // TypeScript doesn't like this.
            console.log('onClick prop');
          }}
          draw={draw}
        />
        <Sprite
          image={viteLogo}
          x={70}
          y={10}
          interactive // TypeScript doesn't like this.
          onClick={() => { // TypeScript doesn't like this
            console.log('onClick logo');
          }}
          click={() => { // TypeScript likes this, but it does nothing
            console.log('click logo');
          }}
        />
      </Stage>
    </>
  );
}

export default App;

Environment

Possible Solution

It looks like the peer deps for @pixi/react are >=6 for everything. I suspect that it's pulling in newer versions of @pixi/* libraries that are simply incompatible with @pixi/react, but I'm not sure.

Additional Information

I'm really sad about this. lol. Without event handling, I have no real use for this otherwise awesome library. It also seems like there hasn't been any movement here in ~7 months, so hopefully it's just a lull in the action.

zOadT commented 8 months ago

I got it working by adding the interactive property and adding a @pixi/events import (see https://github.com/pixijs/pixi-react/issues/464)