Wraps window.open in a react component, allowing the contents to be part of your react render tree
npm install react-popoutwindow.open allowing you to host content in a browser popup window.> npm install react-popout --save
es6
import Popout from 'react-popout'
`
The usage is really simple. When the component is mounted the popup is open, and when it is unmounted the popup is closed.` js
Popped out content!
`To close the window programatically give the window a ref and use the
closeWindow function.props
$3
Title for popup window.$3
URL of the page to load intially. Often needed for css. about:blank will be used if not specified.$3
Called when popout window is closed, either by user or by calling close.$3
Object representing window options. See the docs for reference.Example:
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$3
Instead of using the window global, a window object can be passed in. It needs the following functions on it:window.open( 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.$3
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
// output in new window:
`$3
Provides a callback incase the window wasn't opened, usually due to a popout blocker within the browser.
Example:
`
// input
{}}>
...
`Example hosting component
` js
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 (
Popped out content!
);
} else {
var popout =
return (
Section {popout}
Inline content
);
}
}
}
``The popped out content can have props set and will render just as you would expect a normal React component to render.