Render Container

A SolidJS component that renders a PixiJS RenderContainer.

Please see the PixiJS docs for detailed information.

Demo

Code example

render-container-demo.tsx

import type * as Pixi from "pixi.js";
import { Assets } from "pixi.js";
import { PixiApplication, PixiCanvas, PixiStage, RenderContainer, Sprite } from "pixi-solid";
import { createResource, Show, Suspense } from "solid-js";
import assetUrl from "@/assets/sky.png";

export const DemoApp = () => {
  // Create a resource to load the sky texture
  const [textureResource] = createResource(() => Assets.load<Pixi.Texture>(assetUrl));
  return (
    <PixiApplication>
      <Suspense fallback={<div>Loading...</div>}>
        <PixiCanvas style={{ "aspect-ratio": "2/1.5" }}>
          {/* Show our Stage when the assets are loaded */}
          <Show when={textureResource()}>
            {(texture) => (
              <PixiStage>
                <RenderContainer
                  render={(renderer) => {
                    renderer.clear({
                      clearColor: "pink",
                    });
                  }}
                >
                  <Sprite texture={texture()} />
                </RenderContainer>
              </PixiStage>
            )}
          </Show>
        </PixiCanvas>
      </Suspense>
    </PixiApplication>
  );
};