Skip to content

React New and Improved Window popup using the window.open API

License

Notifications You must be signed in to change notification settings

RyanNerd/react-new-improved-window

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Inspired by David Gilbertson's article.

Pseudo-fork of react-new-window by Rubens Mariuzzo

Features

  • Small footprint
  • Support the full window.open api.
  • Built for React 16 and 17 (uses ReactDOM.createPortal).
  • Handler for blocked popups (via onBlock prop).
  • Handler for created popups (via onOpen prop)
  • Center popups according to the parent window or screen.
  • No external dependencies Only React 16 or 17 as a peer dependency.

What's different from react-new-window?

  • Codebase has been rewritten in TypeScript with many bugs discovered and fixed in the process.
  • Codebase uses React hooks making react-new-improved-window functionally declarative.
  • closeWithParent property indicating to close the new window when the parent window closes.
  • Installation doesn't require the --force switch since both React 16 and 17 are supported.
  • If the title property is missing the new window will use the parent window's title.
  • The features property no longer require height and width if not given and the center property is set then this will default to height: 600, width: 640.
  • Note: Internet Explorer will no longer be supported.

Installation

npm i react-new-improved-window --save

Usage

import React from 'react'
import NewImprovedWindow from 'react-new-improved-window'

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

When <Index /> 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.
closeWithParent boolean false When set to true when the parent window closes so will the popup window.
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.

Development

To start contributing to this project, please do:

  1. Fork and clone this repo.
  2. Make the changes you want to.
  3. Create and push a PR.

To build the library you should have TypeScript installed globally npm install -g typescript

npm run build

Test (example)

In the base directory:

cd example
npm install # You only need to do this once
npm start

This will start the example React App. The example app is linked directly to react-new-improved-window and will pick up any changes made when the library is built.

See: example/src/App.tsx

Prior work


Special thanks to Rubens Mariuzzo.

MIT License