react-new-improved-window v0.2.9
comment: <> ([(.github/banner.svg)](#features))
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 requireheight
andwidth
if not given and thecenter
property is set then this will default toheight: 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:
- Fork and clone this repo.
- Make the changes you want to.
- 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.