Electron and React; detecting electron api changes in react with electron remote

Question

I am trying to change the style of a div tag dynamically when the electron window is maximized. In the code below I want the div class=resizer to display: none when the electron window is maximized.

In the electron api there is a.isMaximized() function call on the window variable. I am requiring the electron remote with: const remote = window.require('electron').remote. Then I remote.getCurrentWindow().

The issue is I can't thing of a way to trigger a way to listen if the window is maximized? I could use like a useEffect() react hook that checks window.isMaximized() every 1 seconds or so, but doesn't seem very optimized and a waste of resources.

Is there a better way to check this? I need a way to 'watch' for when the window becomes maximized.

const remote = window.require('electron').remote

const TitlebarDev = () => {

    const window = remote.getCurrentWindow()

    return (
        <div className="TitlebarDev">
            <div className="Title-BarDev">
                <div className="TitlebarDev-drag-region"></div>
                <div className="Title-BarDev__section-icon">
                </div>
                <div className="Title-BarDev__section-menubar">
                </div>
                <div className="Title-BarDev__section-center">
                </div>
                <div className="Title-BarDev__section-windows-control">
                </div>
                <div
                    // Here is the div I need to change when the window is maximized; I just have a placeholder ternary function on it for concept.
                    style={true ? { display: 'none' } : {}}
                    className="resizer">
                </div>
            </div>
        </div >
    )
}

export default TitlebarDev

Answer 1

I solved this after some time studying. The issue was solved using electrons built-in event listeners on the BrowserWindow (win.) object.

Below in the code; the remote is imported with window.require('electron').remote. Then I save the CurrentWindow() object in a variable called 'window'. On that window variable you can call the.on method which can take the predefined event listeners built into electron. Using window.on('maximize', () => {}) / which is the 'maximize' event listener/ the callback function is ran whenever the window is maximized. On Electrons official API docs under BrowserWindow, there is a full list of event listeners.

Hopefully this can help others out in the future!

import React, { useState } from 'react';
const remote = window.require('electron').remote

const TitlebarDev = () => {

    // React state
    const [isMaximized, setIsMaximized] = useState();

    // Electron currentwindow call with remote
    const window = remote.getCurrentWindow()

    // gets current state if maximized in real time
    window.on('maximize', () => {
        setIsMaximized(true)
    })

    // gets current state if unmaximzed in real time
    window.on('unmaximize', () => {
        setIsMaximized(false)
    })

    return (
        <div className="TitlebarDev">
            <div className="Title-BarDev">
                <div className="TitlebarDev-drag-region"></div>
                <div className="Title-BarDev__section-icon">
                </div>
                <div className="Title-BarDev__section-menubar">
                </div>
                <div className="Title-BarDev__section-center">
                </div>
                <div className="Title-BarDev__section-windows-control">
                </div>
                <div
                    style={isMaximized ? { display: 'none' } : {}}
                    className="resizer">
                </div>
            </div>
        </div >
    )
}

export default TitlebarDev

EDIT: if anyone finds this, don't use "remote" anymore,. Use IPC now. as remote is slow and old. IPC is much much faster and their writing async/await syntax for it.