# react-popout

**Repository Path**: mirrors_iamdustan/react-popout

## Basic Information

- **Project Name**: react-popout
- **Description**: React popout is a React component wrapping window.open allowing you to host content in a browser popup window.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2026-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

 > npm install react-popout --save
 
## Demo
To see it in action just go to [http://jake.ginnivan.net/react-popout](http://jake.ginnivan.net/react-popout)

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

``` js
<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.

## props
### title [required]
Title for popup window

### url [optional]
Url of the page to load intially. Often needed for css. `about:blank` will be used if not specified

### onClosing [optional]
Called when popout window is closed, either by user or by calling close

### options [optional]
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`

### window [optional]
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.

## 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 (
        <Popout url='popout.html' title='Window title' onClosing={this.popupClosed}>
          <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.