Pop a new window in React, using API

Usage no npm install needed!

<script type="module">
  import reactNewWindow from '';



  • Only 2.68KB (gzipped!).
  • Support the full 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 = () => (
    <h1>Hi 👋</h1>

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.
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 are manually done using Storybook. It can be run locally with: yarn storybook.


To start contributing to this project, please do:

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


npm version

Prior work

Made with :heart: by Rubens Mariuzzo.

MIT License