Inspired by David Gilbertson's article.
Features
- Only 2.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. |
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:
- Fork and clone this repo.
- Do your work.
- Create a PR.
Releases
npm run releasePrior work
Made with
