React External Window

With React External Window you can render React components in an external child window from within an app.

Works with redux-connected components!

Installation

Requires React v16 and assumes you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

npm i --save react-external-window

Usage

A Window component accepts the following props. For more information, visit MDN's documentation on window.open.

| Prop Name | Description | Default | | --- | --- | --- | | url | Do not provide one if you want to render the children provided to Window | Empty String | | title | Title to display in title bar | 'Untitled' | | name | Name passed to window.open | | y | Maps to top property of windowFeatures | 0 | | x | Maps to left poperty of windowFeatures | 0 | | resources | Array of resources to include in external window (see Resources Example) | | width | Initial width in pixels of child window | | height | Initial height in pixels of child window | | menubar | Show menubar on child window. Acceptable values are 1/0, yes/no | 0 | | scrollbars | Show scrollbars on child window. Acceptable values are 1/0, yes/no | 1 | | status | Show status bar on child window. Acceptable values are 1/0, yes/no | 0 | | toolbar | Show toolbar on child window. Acceptable values are 1/0, yes/no | 0 | | titlebar | Show menubar on child window. Acceptable values are 1/0, yes/no | 0 | | onLoad | Passed reference to newly created window | | onClose | Passed reference to closing window, useful for saving properties like position or size | | onBlock | Calling window.open fails, usually due to a popup blocker |

React External Window can have be supplied children or a function, which is passed the external window instance.

<Window 
    url=''
    title='My Window'
>
    //...children
</Window>

Using this.props.children as a render prop:

<Window 
    url=''
    title='My Window'
>
{(window) => (
    // ...children to render
    <button onClick={() => window.close()}>Close!</button>
)}
</Window>

Having access to the external window instance allows methods to be called on the external window instead of the parent window. In the example above calling window.close() without access to the instance would call close on the parent window, which is not allowed so nothing would happen.

Example

You have an app that has some data visualizations, among them a component called SweetChart. You want users to see and interact with this SweetChart while also carrying out other tasks. With React External Window the SweetChart (probably a redux-connected component) can live in an external window without the need to load your entire site (or any site) into it.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Window from 'react-external-window';
import { actionTypes } from './reducer';
import SweetChart from './SweetChart';


class App extends Component {
    onOpenBtnClick = () => {
        this.props.onOpenBtnClick();
    }

    render() {
        return (
            <div>
                <SweetChart />
                <button onClick={this.onOpenBtnClick}>Open!</button>
                <div>{this.props.message}</div>
                {this.props.openWindow &&
                    <Window 
                        url=''
                        title='My Window'
                        name='child'
                        onClose={this.props.onCloseWindow}
                    >
                    {(window) => (
                        <React.Fragment>
                            <SweetChart />
                            <button onClick={() => window.close()}>Close!</button>
                        </React.Fragment>
                    )}
                    </Window>
                }
            </div>
        );
    } 
}

const mapStateToProps = (state) => ({
    openWindow: state.openWindow,
    message: state.message,
});

const mapDispatchToProps = (dispatch) => ({
    onOpenBtnClick: () => dispatch({ type: actionTypes.OPEN_WINDOW }),
    onCloseWindow: (window) => dispatch({ type: actionTypes.CLOSE_WINDOW, payload: window }), // save some info about the window instance to use when opening next time
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

Resources Example

If the external window you create uses about:blank, in other words, doesn't load in an actual website, you'll most likely need to supply it with the resources needed for styling and functionality.

The example below shows how to use the resources prop. resources accepts an array of resources, each resource can be of the following format:

| | Resource Type | Format | --- | --- | --- | | 1 | Node or NodeList | [selector, 'append'|'prepend', 'head'|'body'] | | 2 | Absolute URL with extension | String | | 3 | Absolute URL without extension | [url, 'js'|'css'] |

Migrating from v0.2.0 to v1.x.x Prior to v1.0.0, parent styles would be copied automatically if stylesheet was not provided a URL. That behavior has been removed in favor of the more flexible resources prop. To achieve the same effect, add the following to your resources array:

[document.querySelectorAll('style'), 'append', 'head'],

<Window
    url=""
    title="My Window"
    resources={[
        [document.querySelectorAll('style'), 'append', 'head'], // 1
        [document.querySelector('svg'), 'prepend', 'body'], // 1
        'https://kerryrusso.com/blog/wp-content/themes/grateful/css/reset.css?ver=4.9.6', // 2
        'https://kerryrusso.com/blog/wp-content/themes/grateful/style.css?ver=4.9.6', // 2
        'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', // 2
        [
        'https://kerryrusso.com/blog/wp-content/themes/grateful/style',
        'css',
        ], // 3
        ['https://unpkg.com/jquery', 'js'], // 3
    ]}
    >
    {window => (
        <React.Fragment>
        <Form />
        <button
            className="btn btn-danger"
            onClick={() => {
            window.close();
            }}
        >
            Close!
        </button>
        </React.Fragment>
    )}
</Window>