Skip to content
Pixi Solid

Pass through props

Demo

Section titled “Demo”

Move your mouse or touch across the canvas to change the flying speed of the bird.

Code example

Section titled “Code example”

When creating custom components, it’s often useful to pass props through to underlying PixiJS components. This allows for greater flexibility by gaining access to properties such as position, scale or adding event listeners from the outside.

Instead of writing them out one by one, you can use the Pixi Options type of the object you’re passing them into. Combined with the SolidJS splitProps helper and the spread {...props} syntax we can pass all received props or only a specific group of them down to the underlying component.

import type * as Pixi from "pixi.js";
import { Assets } from "pixi.js";
import { AnimatedSprite, Container, onTick, Sprite } from "pixi-solid";
import type { Ref } from "solid-js";
import { splitProps } from "solid-js";


// Using the Pixi ContainerOptions type to allow passing through any ContainerOptions props as well as adding a ref type to forward the ref to an internal Container.
// We omit the `children` prop because the Pixi `children` prop clashes with the `children` prop needed for our JSX.
export type SkyProps = Omit<Pixi.ContainerOptions, "children"> & {
  ref?: Ref<Pixi.Container>;
  flyingSpeed: number;
};


export const Sky = (props: SkyProps) => {
  const skyTexture = Assets.get<Pixi.Texture>("sky");
  const birdTextures = Assets.get<Pixi.Texture>(["bird_01", "bird_02", "bird_03", "bird_04", "bird_05", "bird_06"]);


  // Splitting out flyingSpeed so we pass only the valid Container props to our Container
  const [, containerProps] = splitProps(props, ["flyingSpeed"]);


  return (
    // Spread the containerProps to pass through all valid Container options and the ref
    <Container {...containerProps}>
      <Sprite texture={skyTexture} />
      <AnimatedSprite
        scale={0.5}
        textures={Object.values(birdTextures)}
        animationSpeed={0.4 * props.flyingSpeed}
        ref={(bird) => {
          bird.play();
          let time = 0;
          onTick((ticker) => {
            time = time + ticker.deltaTime * props.flyingSpeed;
            bird.position.x = Math.sin(time / 90) * 20 + 60;
            bird.position.y = Math.cos(time / 30) * 25 + 30;
          });
        }}
      />
    </Container>
  );
};