pixijs / pixi-react

Write PIXI apps using React declarative style
https://pixijs.io/pixi-react/
MIT License
2.25k stars 173 forks source link

Add support for core plugins #374

Open baseten opened 1 year ago

baseten commented 1 year ago

Info

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

Tasks

simjega commented 1 year ago
artokun commented 10 months ago

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;
    },
  },
);
woody146 commented 8 months ago

Waiting for pixi-ui and pixi-layout

StreakingMan commented 7 months ago

Waiting for spine