Inspired by David Gilbertson's article.
- Only 3.68KB (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.
npm i react-new-window --save
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.
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 are manually done using Storybook. It can be run locally with: yarn storybook
.
To start contributing to this project, please do:
- Fork and clone this repo.
- Do your work.
- Create a PR.
The release process consists of two operations:
- Create new version using:
npm version
- This GitHub action will publish the new version to NPM.
Made with 鉂わ笍 by Rubens Mariuzzo.