diff --git a/examples/web/react/components/display/display.tsx b/examples/web/react/components/display/display.tsx index 38a921987f50ca25a97bce0f91d3a6c6052d29e6..99acfff5a3709445c7a057d86e536e384d87936f 100644 --- a/examples/web/react/components/display/display.tsx +++ b/examples/web/react/components/display/display.tsx @@ -59,6 +59,11 @@ export const Display: FC<DisplayProps> = ({ const [width, setWidth] = useState<number | undefined>(undefined); const [height, setHeight] = useState<number | undefined>(undefined); const canvasRef = useRef<HTMLCanvasElement>(null); + const resizeRef = useRef(() => { + const [fullWidth, fullHeight] = crop(options.width / options.height); + setWidth(fullWidth); + setHeight(fullHeight); + }); useEffect(() => { if (canvasRef.current && !canvasContents) { @@ -69,16 +74,14 @@ export const Display: FC<DisplayProps> = ({ ); } if (fullscreen) { - const [fullWidth, fullHeight] = crop( - options.width / options.height - ); - setWidth(fullWidth); - setHeight(fullHeight); + resizeRef.current(); + window.addEventListener("resize", resizeRef.current); } else { setWidth(undefined); setHeight(undefined); + window.removeEventListener("resize", resizeRef.current); } - }); + }, [canvasRef, fullscreen]); if (onDrawHandler) { onDrawHandler((pixels: Uint8Array, format: PixelFormat) => {