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:

export class SubWindow extends React.Component {
  nativeWindowObject: null;

  componentWillMount() {
    this.nativeWindowObject = window.open('');
  }
  render() {
    return this.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

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // To keep track of the new window if opened or closed
      isNewWindow: 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) &&
    <NewWindowComponent
      onClose={() => this.setState({ isNewWindow: false })>
      <h2>This will display in a new window</h2>
    </NewWindowComponent> }

    <button
      onClick={() => this.setState({ isNewWindow: true })}>
      Open in new window</button>
    )
  }
}

NewWindowComponent.js

export default class NewWindowComponent extends Component {
  // Create a container <div> for the window
  private containerEl = document.createElement('div');

  // This will keep a reference of the window
  private 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 file
    this.externalWindow = window.open('', 'NewWindowComponent ');

    // Append the container div and register the event that will get fired when the
    // window is closed
    if (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 options
      if (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.

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


  }

And on the router file

<Route path="/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.