React New Window

Pop new windows in React, using window.open.

Inspired by David Gilbertson's article (must read, must follow).

Features

• Only 3.7KB (that's 1.6KB gzipped!).
• Support the full window.open api.
• Built for React 16 (uses ReactDOM.createPortal).
• Handler for blocked popups (via onBlock prop).
• Center popups according to the parent window or screen.

Installation

• npm install react-new-window --save

  or

• yarn add react-new-window

Usage

import React from 'react'
import NewWindow from 'react-new-window'

const Demo = () => (
  <NewWindow>
    <h1>Hi 👋</h1>
  </NewWindow>
)

When <NewWindow /> is mounted a popup window will be opened. When unmounted then the popup will be closed.

The children contents is what will be rendered into the new popup window. In that case Hi 👋 will be the content. The content can include any react-stateful code.

Documentation

Properties	Type	Default	Description
url	String		The URL to open, if specified any children will be overriden (more details on url).
name	String		The name of the window (more details on windowName).
title	String		The title of the new window document.
features	Object	{}	The set of window features (more details on windowFeatures).
onUnload	Function	undefined	A function to be triggered before the new window unload.
onBlock	Function	undefined	A function to be triggered when the new window could not be opened.
center	String	parent	Indicate how to center the new window. Valid values are: parent or screen. parent will center the new window according to its parent window. screen will center the new window according to the screen.
copyStyles	Boolean	true	If specified, copy styles from parent window's document.

Tests

Tests are manually done using Storybook. It can be run locally with: yarn storybook.

Development

To start contributing to this project, please do:

1. Fork and clone this repo.
2. Do your work.
3. Create a PR.

Releases

To release this project the following tasks should be done:

1. Build distribution files: yarn build.
2. Build Storybook demo files: yarn build-storybook.
3. Bump version and create tag: npm version #.#.# -m 'Version %s.'.
4. Push new created tag: git push origin --tags.
5. Publish: npm publish.

Prior work

• react-popout.

---

Made with ❤️ by Rubens Mariuzzo.

MIT License