Bug: Application does not react to width and height props
<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>
);
}
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.