# react-popout-new

> Wraps window.open in a react component, allowing the contents to be part of your react render tree

Latest version **0.7.0** (published 2017-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-popout-new
pnpm add react-popout-new
yarn add react-popout-new
bun add react-popout-new
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2017-05-16 |
| First published | 2017-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jake Ginnivan |
| Maintainers | ortemis |
| Keywords | react, react-component, window, popup, open, browser |

## Links

- npm: https://www.npmjs.com/package/react-popout-new
- Repository: https://github.com/JakeGinnivan/react-popout
- Homepage: https://github.com/JakeGinnivan/react-popout#readme
- Issues: https://github.com/JakeGinnivan/react-popout/issues
- npm.io page: https://npm.io/package/react-popout-new

## Recent versions

- 0.7.0 (latest) — 2017-05-16

## 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
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.

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

### containerID [optional]

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

## 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.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.

---
_Source: https://npm.io/package/react-popout-new · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._