Overview

Event handlers

Pixi Solid components support’s all PixiJS event handlers for various user interactions and events. These event handlers can be added as props to the components, similar to how event handlers are added in SolidJS.

The event handler names are the same as in PixiJS, but prefixed with on. mouseover becomes onmouseover. Refer to the PixiJS events docs for more details on each event and when they are triggered and how event modes work. The usage is exactly the same as in PixiJS but we access them via SolidJS props instead of adding and removing listeners imperatively.

//...
<Sprite
  //...
  eventMode="static"
  onpointertap={(event) => {
    console.log("Sprite clicked!", event);
  }}
  onpointerover={(event) => {
    console.log("Pointer moved over Sprite!", event);
  }}
/>
//...

Full event list