According to this article we shouldn't use "remote" at all. The better way is to communicate with the renderer through Sending Messages.
First of all, you'll need WindowNodeHandlers class to invoke BrowserWindow maximize/unmaximize actions and update isMaximized flag:
class WindowNodeHandlers {
ipcMain.on('maximize', () => {
BrowserWindow.getFocusedWindow()?.maximize();
});
ipcMain.on('unmaximize', () => {
BrowserWindow.getFocusedWindow()?.unmaximize();
});
ipcMain.on('isMaximized', (event) => {
event.returnValue = BrowserWindow.getFocusedWindow()?.isMaximized();
});
}
Then create ElectronWindowApi class to communicate between renderer and main processes:
class ElectronWindowApi implements MainWindowApi {
maximize(): void {
ipcRenderer.send('maximize');
}
unmaximize(): void {
ipcRenderer.send('unmaximize');
}
isMaximized(): boolean {
return ipcRenderer.sendSync('isMaximized') as boolean;
}
}
After that in your createWindow function create WindowNodeHandlers instance and add listeners for these events which will send messages back to renderer process:
const createWindow = async () => {
...
new WindowNodeHandlers();
mainWindow.on('maximize', () =>
mainWindow?.webContents.send('window-maximized')
);
mainWindow.on('unmaximize', () =>
mainWindow?.webContents.send('window-unmaximized')
);
}
And the last thing you should do - it's to add handlers for these messages and use ElectronWindowApi to call maximize/unmaximize actions on the renderer side:
...
const windowApi = new ElectronWindowApi();
const [isMaximized, setIsMaximized] = useState(windowApi.isMaximized());
const onMaximized = () => setIsMaximized(true);
const onRestore = () => setIsMaximized(false);
const toggleMaximize = () => {
isMaximized ? windowApi.unmaximize() : windowApi.maximize();
};
useEffect(() => {
ipcRenderer.on('window-maximized', onMaximized);
ipcRenderer.on('window-unmaximized', onRestore);
}, []);
return (
<IconButton
aria-label={isMaximized ? 'minimize' : 'maximize'}
onClick={toggleMaximize}
>
{isMaximized ? (
<SvgIcon
component={MinimizeWindowIcon}
/>
) : (
<SvgIcon
component={MaximizeWindowIcon}
/>
)}
</IconButton>
)
...
