Inspired by David Gilbertson's article.
Features
- Only 3.68KB (gzipped!).
- Support the full
window.openapi. - Built for React 16 (uses
ReactDOM.createPortal). - Handler for blocked popups (via
onBlockprop). - Center popups according to the parent window or screen.
Installation
npm i react-new-window --saveUsage
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. |
onOpen |
Function(w: Window) |
undefined |
A function to be triggered when window open by library. |
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. |
closeOnUnmount |
Boolean |
true |
If specified, close the new window on unmount. |
Tests
Tests are manually done using Storybook. It can be run locally with: yarn storybook.
Development
To start contributing to this project, please do:
- Fork and clone this repo.
- Do your work.
- Create a PR.
Releases
The release process consists of two operations:
- Create new version using:
npm version - This GitHub action will publish the new version to NPM.
Prior work
Made with