React popout is a React component wrapping window.open allowing you to host content in a browser popup window.

npm install react-popout --save

To see it in action just go to http://jake.ginnivan.net/react-popout

Import with es6

import PopoutWindow from 'react-popout'

The usage is really simple, when the component is mounted the popup is open, when it is unmounted the popup is closed.

<Popout url='popout.html' title='Window title' onClosing={this.popupClosed}>
  <div>Popped out content!</div>
</Popout>

To close the window programatically give the window a ref and use the closeWindow function.

Title for popup window

Url of the page to load intially. Often needed for css. about:blank will be used if not specified

Called when popout window is closed, either by user or by calling close

Object representing window options. See https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Position_and_size_features for reference.

Example: <Popout options={{left: '100px', top: '200px'}} />

By default 500px wide, 400px high and centered over the window hosting the react component.

You can also specify a function with signature (options, window) => { } to perform calculations. For example top is calculated with (o, w) => ((w.innerHeight - o.height) / 2) + w.screenY

Instead of using the window global, a window object can be passed in. It needs the following functions on it:

window.open(<url>, <title>, <strWindowFeatures>); and return an object which looks like this:

{
  onbeforeunload: () => { },
  onload: () => { },
  close: () => { },
  document: {
    title: string,
    body: {
      appendChild: (ele) => { }
    }
  }
}

This can be used if you need to intercept the calls and do something else.

Assigns an Id to the container that will be injected in the popup window document.body, defaults to popout-content-container, useful for cascading styles.

Example:

// input
<Popout containerId='tearoff'>
  <SomeComponent />
</Popout>

// output in new window:
<div id="tearoff">
  <SomeComponent />
</div>

class HostingComponent {
  constructor(props) {
    super(props);
    this.popout = this.popout.bind(this);
    this.popoutClosed = this.popoutClosed.bind(this);
    this.state = { isPoppedOut: false };
  }

  popout() {
    this.setState({isPoppedOut: true});
  }

  popoutClosed() {
    this.setState({isPoppedOut: false});
  }

  render() {
    if (this.state.isPoppedOut) {
      return (
        <Popout url='popout.html' title='Window title' onClosing={this.popoutClosed}>
          <div>Popped out content!</div>
        </Popout>
      );
    } else {
      var popout = <span onClick={this.popout} className="buttonGlyphicon glyphicon glyphicon-export"></span>
      return (
        <div>
          <strong>Section {popout}</strong>
          <div>Inline content</div>
        </div>
      );
    }
  }
}

The popped out content can have props set and will render just as you would expect a normal React component to render.