Minimal Example: Opening A Window In Electron From React Application?

Say I am building a desktop application with react/redux & electron. So my index.html file in electron looks like this: ...

Solution 1:

The "createPortal" api in react 16 will help you.

First let's say we have a component like this:

<SubWindow><h1>bar</h1></SubWindow>

Then open(or close) a window in its lifecycle methods like this:

exportclassSubWindowextendsReact.Component {
  nativeWindowObject: null;

  componentWillMount() {
    this.nativeWindowObject = window.open('');
  }
  render() {
    returnthis.nativeWindowObject ? ReactDOM.createPortal(this.props.children, this.nativeWindowObject.document.body) : null;
  }
}

Notice: You MUST set webPreferences:{nativeWindowOpen: true} in your main window to make sure "window.open" returns a native Window object. Visit https://electronjs.org/docs/api/window-open for more infomation.

Solution 2:

To open a react component in a new window on button click and detect when the window is closed because the component will not simply call componentWillUnmount when you close the window Your app should look like this

App.js

exportdefaultclassAppextendsReact.Component {
  constructor(props) {
    super(props);
    this.state = {
      // To keep track of the new window if opened or closedisNewWindow: false,
    };
  }

  render() {
    return(
    // onClose will be fired when the new window is closed// everything inside NewWindowComponent is considered props.children and will be// displayed in a new window
    {(this.state.isNewWindow) &&
    <NewWindowComponentonClose={() => this.setState({ isNewWindow: false })>
      <h2>This will display in a new window</h2></NewWindowComponent> }

    <button
      onClick={() =>this.setState({ isNewWindow: true })}>
      Openinnewwindow</button>
    )
  }
}

NewWindowComponent.js

export default classNewWindowComponentextendsComponent{
  // Create a container <div> for the windowprivate containerEl = document.createElement('div');

  // This will keep a reference of the windowprivate externalWindow = null;

  // When the component mounts, Open a new window
  componentDidMount() {
    // The second argument in window.open is optional and can be set to whichever// value you want. You will notice the use of this value when we modify the main// electron.js filethis.externalWindow = window.open('', 'NewWindowComponent ');

    // Append the container div and register the event that will get fired when the// window is closedif (this.externalWindow)
    {
      this.externalWindow.document.body.appendChild(this.containerEl);
      this.externalWindow.onunload = () => this.props.onClose();
    }
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.containerEl);
  }
}

electron-main.js or however your main electron file is named

...
function createWindow() {
  mainWindow = new BrowserWindow({
    ...
    // You need to activate `nativeWindowOpen`
    webPreferences: { nativeWindowOpen: true },
  });
  ...
  mainWindow.webContents.on('new-window',
    (event, url, frameName, disposition, options, additionalFeatures) =>
    {
      // This is the name we chose for our window. You can have multiple names for// multiple windows and each have their optionsif (frameName === 'NewWindowComponent ') {
        event.preventDefault();
        Object.assign(options, {
          // This will prevent interactions with the mainWindow
          parent: mainWindow,
          width: 300,
          height: 300,
          // You can also set `left` and `top` positions
        });
        event.newGuest = new BrowserWindow(options);
    }
  });
  ...
}
...

Solution 3:

On clicking the button handleNewWindow is called. Make the nodeIntegration to true or preload js.

consthandleNewWindow =()=> {
    const remote=require('electron').remote;
    constBrowserWindow=remote.BrowserWindow;
    const win = newBrowserWindow({
      height: 600,
      width: 800,
      frame:false,
      webPreferences: {
        nodeIntegration: true,
    }
    });
    win.loadURL(`file://${__dirname}/app.html#/login`);


  }

And on the router file

<Routepath="/login"component={Login} />

By using this code we can open the reactjs file and route to login. The app.html is main file which is loaded in main.dev.js in electron-react-boilerplate code. The hashing is simplest method to open the reactjs file. As the loadURL in electron only loads urls and htmls files we can't open js files.