Info

We are aiming to get all of our 1st party plugins available in the react ecosystem. This means adding several missing packages

Tasks

[ ] Add Spine
[ ] Add Particles
[ ] Add Animate
[ ] Add Graphics-smooth
[ ] Add pixi-gif
[ ] Add pixi-html-text
[ ] Add pixi-filters (may not be needed as filters in general work)
[ ] Add pixi-ui (under development)
[ ] Add pixi-layout (under development)

Jan 18 '23 14:01 baseten

1 to this! I need graphics smooth right now.

Feb 28 '23 06:02 simjega

I got one for SmoothGraphics built up

import { Container } from "@pixi/display";
import {
  SmoothGraphics as Graphics,
  type SmoothGraphicsGeometry,
} from "@pixi/graphics-smooth";
import {
  applyDefaultProps,
  type Container as IContainer,
  PixiComponent,
} from "@pixi/react";

type SmoothGraphicsOptions = {
  draw: (g: Graphics) => Graphics;
  geometry?: SmoothGraphicsGeometry;
};

export type SmoothGraphicsProps = typeof IContainer.defaultProps &
  SmoothGraphicsOptions;

export const GraphicsSmooth = PixiComponent<SmoothGraphicsProps, Container>(
  "GraphicsSmooth",
  {
    create: ({ geometry }) => {
      const container = new Container();
      const g = geometry ? new Graphics(geometry) : new Graphics();
      container.addChild(g);
      return container;
    },
    applyProps: (container, prevProps, nextProps) => {
      const { draw, geometry: _, ...props } = nextProps;
      const instance = container.children[0] as Graphics;

      applyDefaultProps(container, prevProps, props);

      if (prevProps.draw !== draw && typeof draw === "function") {
        draw.call(instance, instance);
      }

      return container;
    },
  },
);