Minimal Example: Opening a window in electron from react application?

Question

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

Answer 1

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

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

  
bar

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.