pixi-react icon indicating copy to clipboard operation
pixi-react copied to clipboard

Bug: Application does not react to width and height props

Open EliasWatson opened this issue 9 months ago • 1 comments

<Application> does not update the canvas when its width or height props change.

Example

https://codesandbox.io/p/sandbox/5jts6z

import { Application } from "@pixi/react";
import { useState } from "react";

export default function App() {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

  return (
    <div>
      <div>
        <span>Width</span>
        <input
          type="range"
          min={0}
          max={500}
          value={width}
          onChange={(e) => setWidth(Number(e.target.value))}
        />
        <span>{width}</span>
      </div>
      <div>
        <span>Height</span>
        <input
          type="range"
          min={0}
          max={500}
          value={height}
          onChange={(e) => setHeight(Number(e.target.value))}
        />
        <span>{height}</span>
      </div>
      <Application width={width} height={height}></Application>
    </div>
  );
}

EliasWatson avatar Jul 21 '25 19:07 EliasWatson

All of the props in https://pixijs.download/dev/docs/app.ApplicationOptions.html except resizeTo can not be set after mount (init has been called), directly on the Application instance.

FWIW, this doesn't work in core pixi.js either. If you set the width or height after initialization it has no effect. https://codesandbox.io/p/sandbox/sqtfd5

I tried to prototype this with resizeTo with a parent element as a ref and manually setting the parent's width and height, and ran into essentially the same issue, so I would like to leave this open to investigate that flow, and leave a reminder to add some more docs around this use case.

resizeTo set to the window worked as intended, but doesn't offer control of explicit size.

thejustinwalsh avatar Jul 22 '25 15:07 thejustinwalsh