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 utility type PixiComponentProps which contains props for the PixiJS Container but you can extend it by passing in the specific component type a generic PixiComponentProps<Pixi.SpriteOptions>. It may be useful to combine with the built itn Omit or Pick utility types to exclude or include specific props. 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 type { PixiComponentProps } from "pixi-solid";
import { AnimatedSprite, Container, onTick, Sprite } from "pixi-solid";
import type { Ref } from "solid-js";
import { splitProps } from "solid-js";


// Using the utility PixiComponentProps type to allow passing through any ContainerOptions props as well as adding a ref type to forward the ref to an internal Container.
export type SkyProps = PixiComponentProps & {
  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>
  );
};