├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── LICENSE
├── README.md
├── _webpack.demo.config.js
├── demo
├── demo.jsx
├── demo2.jsx
├── demo3.jsx
├── demoPopup.html
├── exampleContainer.jsx
├── examples.js
├── index.html
└── test.css
├── lib
└── react-popout.tsx
├── package.json
├── test
└── react-popout.spec.jsx
└── tsconfig.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 |
3 | # A special property that should be specified at the top of the file outside of
4 | # any sections. Set to true to stop .editor config file search on current file
5 | root = true
6 |
7 | [*]
8 | # Indentation style
9 | # Possible values - tab, space
10 | indent_style = space
11 |
12 | # Indentation size in single-spaced characters
13 | # Possible values - an integer, tab
14 | indent_size = 4
15 |
16 | # Line ending file format
17 | # Possible values - lf, crlf, cr
18 | end_of_line = lf
19 |
20 | # File character encoding
21 | # Possible values - latin1, utf-8, utf-16be, utf-16le
22 | charset = utf-8
23 |
24 | # Denotes whether to trim whitespace at the end of lines
25 | # Possible values - true, false
26 | trim_trailing_whitespace = true
27 |
28 | # Denotes whether file should end with a newline
29 | # Possible values - true, false
30 | insert_final_newline = true
31 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env":{
3 | "browser":true,
4 | "es6":true,
5 | "mocha":true
6 | },
7 | "ecmaFeatures":{
8 | "modules":true,
9 | "jsx":true
10 | },
11 | "plugins": [
12 | "react"
13 | ],
14 | "parser": "babel-eslint",
15 | "rules": {
16 | "semi": 1,
17 | "global-strict": 0,
18 | "quotes": [2, "single"],
19 | "key-spacing": 0,
20 | "no-trailing-spaces": 0,
21 | "eol-last": 0,
22 | "no-underscore-dangle": 0,
23 | "no-console": 0
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | *.orig
29 |
30 | demo/demo.js
31 | dist/react-popout.min.js
32 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | # Dependency directory
2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
3 | node_modules
4 | *.orig
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 140,
3 | "tabWidth": 4,
4 | "singleQuote": true
5 | }
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "stable"
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Jake Ginnivan
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-popout
2 | React popout is a React component wrapping `window.open` allowing you to host content in a browser popup window.
3 |
4 | > npm install react-popout --save
5 |
6 | ## Demo
7 | To see it in action just go to [http://jake.ginnivan.net/react-popout](http://jake.ginnivan.net/react-popout)
8 |
9 | ## Usage
10 | Import with `es6`
11 | ```
12 | import Popout from 'react-popout'
13 | ```
14 | The usage is really simple. When the component is mounted the popup is open, and when it is unmounted the popup is closed.
15 |
16 | ``` js
17 |
18 | Popped out content!
19 |
20 | ```
21 |
22 | To close the window programatically give the window a ref and use the `closeWindow` function.
23 |
24 | ## props
25 | ### title [required]
26 | Title for popup window.
27 |
28 | ### url [optional]
29 | URL of the page to load intially. Often needed for css. `about:blank` will be used if not specified.
30 |
31 | ### onClosing [optional]
32 | Called when popout window is closed, either by user or by calling close.
33 |
34 | ### options [optional]
35 | Object representing window options. See [the docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Position_and_size_features) for reference.
36 |
37 | Example:
38 | ``
39 |
40 | By default 500px wide, 400px high and centered over the window hosting the react component.
41 |
42 | You can also specify a function with signature `(options, window) => { }` to perform calculations.
43 | For example top is calculated with `(o, w) => ((w.innerHeight - o.height) / 2) + w.screenY`
44 |
45 | ### window [optional]
46 | Instead of using the `window` global, a window object can be passed in. It needs the following functions on it:
47 |
48 | `window.open(, , <strWindowFeatures>);` and return an object which looks like this:
49 |
50 | ```
51 | {
52 | onbeforeunload: () => { },
53 | onload: () => { },
54 | close: () => { },
55 | document: {
56 | title: string,
57 | body: {
58 | appendChild: (ele) => { }
59 | }
60 | }
61 | }
62 | ```
63 | This can be used if you need to intercept the calls and do something else.
64 |
65 | ### containerId [optional]
66 |
67 | 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.
68 |
69 | Example:
70 | ```
71 | // input
72 | <Popout containerId='tearoff'>
73 | <SomeComponent />
74 | </Popout>
75 |
76 | // output in new window:
77 | <div id="tearoff">
78 | <SomeComponent />
79 | </div>
80 | ```
81 |
82 | ### onError [optional]
83 |
84 | Provides a callback incase the window wasn't opened, usually due to a popout blocker within the browser.
85 |
86 | Example:
87 | ```
88 | // input
89 | <Popout onError={() => {}}>
90 | ...
91 | </Popout>
92 | ```
93 |
94 | ## Example hosting component
95 |
96 | ``` js
97 | class HostingComponent {
98 | constructor(props) {
99 | super(props);
100 | this.popout = this.popout.bind(this);
101 | this.popoutClosed = this.popoutClosed.bind(this);
102 | this.state = { isPoppedOut: false };
103 | }
104 |
105 | popout() {
106 | this.setState({isPoppedOut: true});
107 | }
108 |
109 | popoutClosed() {
110 | this.setState({isPoppedOut: false});
111 | }
112 |
113 | render() {
114 | if (this.state.isPoppedOut) {
115 | return (
116 | <Popout url='popout.html' title='Window title' onClosing={this.popoutClosed}>
117 | <div>Popped out content!</div>
118 | </Popout>
119 | );
120 | } else {
121 | var popout = <span onClick={this.popout} className="buttonGlyphicon glyphicon glyphicon-export"></span>
122 | return (
123 | <div>
124 | <strong>Section {popout}</strong>
125 | <div>Inline content</div>
126 | </div>
127 | );
128 | }
129 | }
130 | }
131 | ```
132 |
133 | The popped out content can have props set and will render just as you would expect a normal React component to render.
134 |
--------------------------------------------------------------------------------
/_webpack.demo.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | entry: ['./demo/exampleContainer.jsx'],
3 | output: {
4 | path: __dirname + '/demo',
5 | filename: 'examples.js'
6 | },
7 | devServer: {
8 | contentBase: './demo',
9 | hot: true
10 | },
11 | module: {
12 | loaders: [{
13 | test: /\.j(s|sx)$/,
14 | exclude: /node_modules/,
15 | loader: 'babel-loader',
16 | query: {
17 | presets: ['es2015', 'stage-0', 'react']
18 | }
19 | }]
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/demo/demo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Popout from '../lib/react-popout';
3 |
4 | export default class Example extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.popout = this.popout.bind(this);
8 | this.incrementTimer = this.incrementTimer.bind(this);
9 | this.popoutClosed = this.popoutClosed.bind(this);
10 | this.popoutContentClicked = this.popoutContentClicked.bind(this);
11 | this.state = { isPoppedOut: false, timer: 0 };
12 | }
13 |
14 | incrementTimer() {
15 | let newTimer = this.state.timer + 1;
16 | this.setState({ timer: newTimer });
17 | }
18 |
19 | popout() {
20 | this.setState({ isPoppedOut: true, timerId: setInterval(this.incrementTimer, 1000) });
21 | }
22 |
23 | popoutClosed() {
24 | if (this.state.timerId) {
25 | clearInterval(this.state.timerId);
26 | this.setState({ isPoppedOut: false, timerId: null, timer: 0 });
27 | }
28 | }
29 |
30 | popoutContentClicked() {
31 | this.popoutClosed();
32 | }
33 |
34 | render() {
35 | if (this.state.isPoppedOut) {
36 | return (
37 | // Remove url parameter to see about:blank support
38 | <Popout title='Test' onClosing={this.popoutClosed}>
39 | <div>
40 | <div>Popped out content! Timer: {this.state.timer}</div>
41 | <div onClick={this.popoutContentClicked}>Close</div>
42 | </div>
43 | </Popout>
44 | );
45 | } else {
46 | return (
47 | <div>
48 | <strong>Example: Only render popout <a style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer' }}
49 | onClick={this.popout}>(pop window out)</a></strong>
50 | <div>Demo 1 - Inline content</div>
51 | </div>
52 | );
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/demo/demo2.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Popout from '../lib/react-popout';
3 |
4 | export default class Example2 extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.popout = this.popout.bind(this);
8 | this.incrementTimer = this.incrementTimer.bind(this);
9 | this.popoutClosed = this.popoutClosed.bind(this);
10 | this.popoutContentClicked = this.popoutContentClicked.bind(this);
11 | this.state = { isPoppedOut: false, timer: 0 };
12 | }
13 |
14 | incrementTimer() {
15 | var newTimer = this.state.timer + 1;
16 | this.setState({ timer: newTimer});
17 | }
18 |
19 | popout() {
20 | this.setState({isPoppedOut: true, timerId: setInterval(this.incrementTimer, 1000)});
21 | }
22 |
23 | popoutClosed() {
24 | if (this.state.timerId) {
25 | clearInterval(this.state.timerId);
26 | this.setState({isPoppedOut: false, timerId: null, timer: 0});
27 | }
28 | }
29 |
30 | popoutContentClicked() {
31 | this.popoutClosed();
32 | }
33 |
34 | render() {
35 |
36 | return (
37 | <div>
38 | { this.state.isPoppedOut ?
39 |
40 | <Popout title='Test' onClosing={this.popoutClosed}>
41 | <div>
42 | <div>Popped out content! Timer: {this.state.timer}</div>
43 | <div onClick={this.popoutContentClicked}>Close</div>
44 | </div>
45 | </Popout> : false }
46 | <div>
47 |
48 | <strong>Example: Render popup and component <a style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer' }} onClick={this.popout}>(pop window out)</a></strong>
49 | <div>Inline content</div>
50 | </div>
51 | </div>
52 | );
53 |
54 | }
55 | }
56 |
57 |
--------------------------------------------------------------------------------
/demo/demo3.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Popout from '../lib/react-popout';
3 |
4 | export default class Example3 extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.popout = this.popout.bind(this);
8 | this.incrementTimer = this.incrementTimer.bind(this);
9 | this.popoutClosed = this.popoutClosed.bind(this);
10 | this.popoutContentClicked = this.popoutContentClicked.bind(this);
11 | this.state = { isPoppedOut: false, timer: 0 };
12 | }
13 |
14 | incrementTimer() {
15 | var newTimer = this.state.timer + 1;
16 | this.setState({ timer: newTimer});
17 | }
18 |
19 | popout() {
20 | this.setState({isPoppedOut: true, timerId: setInterval(this.incrementTimer, 1000)});
21 | }
22 |
23 | popoutClosed() {
24 | if (this.state.timerId) {
25 | clearInterval(this.state.timerId);
26 | this.setState({isPoppedOut: false, timerId: null, timer: 0});
27 | }
28 | }
29 |
30 | popoutContentClicked() {
31 | this.popoutClosed();
32 | }
33 |
34 | render() {
35 |
36 | return (
37 | <div>
38 | { this.state.isPoppedOut ?
39 |
40 | <Popout title='Test' onClosing={this.popoutClosed} url='/demoPopup.html'>
41 | <div>
42 | <div>Popped out content! Timer: {this.state.timer}</div>
43 | <div onClick={this.popoutContentClicked}>Close</div>
44 | </div>
45 | </Popout> : false }
46 | <div>
47 | <strong>Example: Using url <a style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer' }} onClick={this.popout}>(pop window out)</a></strong>
48 | </div>
49 | </div>
50 | );
51 |
52 | }
53 | }
54 |
55 |
--------------------------------------------------------------------------------
/demo/demoPopup.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8">
5 | <title>History
6 |
7 |
8 |
9 |
10 |