How can I listen to when the window is maximized or minimized?

[Looky1173]

Is it possible to listen to when the window is maximized or minimized using the Tauri JS API? I found nothing in the documentation that would allow me to do this. Do I have to resort to periodically polling appWindow.isMaximized? Thank you for all answers in advance!

[Looky1173]

I've managed to solve my problem with appWindow.onResized which fires when a window is maximized/minimized.

[Waradu]

can you show me how you did it?

[Looky1173]

@Waradu Sure! When my app loads, I get the initial state of the window (i.e., is it minimised or maximised) with await appWindow.isMaximized(). Then I listen to appWindow.onResized and pass a function as a callback that gets the new state of the window using await appWindow.isMaximized() when this event is triggered. Here is my complete implementation in React:

import { useState, useEffect, useCallback } from 'react';

const MyComponent = () => {
    const [isWindowMaximized, setIsWindowMaximized] = useState(null);
    
    const updateIsWindowMaximized = useCallback(async () => {
        const resolvedPromise = await appWindow.isMaximized();
        setIsWindowMaximized(resolvedPromise);
    }, []);
    
    useEffect(() => {
        updateIsWindowMaximized();
    
        let unlisten = undefined;
    
        const listen = async () => {
            unlisten = await appWindow.onResized(() => {
                updateIsWindowMaximized();
            });
        };
    
        listen();
    
        return () => unlisten && unlisten();
    }, [updateIsWindowMaximized]);

    /* ... */
};

[Xentox-Phil]

Or as a hook...
I would actually love to see a library with some hooks for tauri 😍

export function useIsMaximized() {
  const [isMaximized, setIsMaximized] = useState<boolean>(false);

  useEffect(() => {
    function handleResize() {
      appWindow.isMaximized().then((newState) => setIsMaximized(newState));
    }
    handleResize();

    const unlisten = appWindow.listen('tauri://resize', async () => {
      handleResize();
    });
    return () => {
      unlisten.then((u) => u());
    };
  }, []);

  return { isMaximized };
}