pixijs / pixi-react

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

Bug: PixiComponent type issue with Text #459

Open coolbeatz71 opened 9 months ago

coolbeatz71 commented 9 months ago

Current Behavior

Current Behavior Type error when using PixiComponent with Text in typescript after upgrading the package version to below:

@pixi/react version: 7.1.1 pixi.js version: 7.3.1 @pixi/text version: 7.3.1

import { Text } from "@pixi/react";
.
.
.

const style = new PIXI.TextStyle({});
const dragDropText = "Drag & drop a 3D model and resources to load it...";

<Text
  text={dragDropText}
  x={window.innerWidth / 2 - textMetrics.width / 2}
  y={window.innerHeight / 2 - textMetrics.height / 2}
  style={style}
  visible={!meshesLoaded}
/>
Type '{ text: string; x: number; y: number; style: TextStyle; visible: boolean; }' is not assignable to type 'IntrinsicAttributes & Partial<Omit<PixiText, any> & WithPointLike<P>> & WithSource & InteractionEvents & { ...; }'.
  Property 'text' does not exist on type 'IntrinsicAttributes & Partial<Omit<PixiText, any> & WithPointLike<P>> & WithSource & InteractionEvents & { ...; }'.ts(2322)

Expected Behavior

The Text component should render with no typescript errors, I actually followed the documentation example.

Steps to Reproduce

You can find a codesanbox here: https://codesandbox.io/s/magical-jang-wp3dtv?file=/src/App.tsx

  1. Install the package version in a typescript react project

    • @pixi/react version: 7.1.1
    • pixi.js version: 7.3.1
    • @pixi/text version: 7.3.1
  2. Create a small react & typescript component:

import { Stage, Container, Text } from '@pixi/react';

const MyComponent = () => {
 const style = new PIXI.TextStyle({});

 return (
    <Stage>
      <Container>
        <Text text="Hello World" x={400} y={330} style={style} />
      </Container>
   </Stage>
  );
};

Environment

Possible Solution

Remove text, style, etc from the omitted properties Partial<Omit<PixiText, any>

Additional Information

No response

sibstark commented 3 days ago

Same problem