react-new-window | Npm Package Usage Trend

react-new-window

Pop a new window in React, using window.open API

🌟 Show real-time usage chart on react-new-window's README.md, just copy the code below.

## Usage Trend
[![Usage Trend of react-new-window](https://npm-compare.com/img/npm-trend/THREE_YEARS/react-new-window.png)](https://npm-compare.com/react-new-window#timeRange=THREE_YEARS)

🌟 Show GitHub stars trend chart on react-new-window's README.md, just copy the code below.

## GitHub Stars Trend
[![GitHub Stars Trend of react-new-window](https://npm-compare.com/img/github-trend/react-new-window.png)](https://npm-compare.com/react-new-window)

Package	Downloads	Stars	Size	Issues	Publish	License

react-new-window	102,563	463	106 kB	59	-	MIT

react-new-window

Inspired by David Gilbertson's article.

Features

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.

Installation

npm i react-new-window --save

Usage

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.
`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

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

The release process consists of two operations:

Create new version using: npm version
This GitHub action will publish the new version to NPM.

Prior work

react-popout.

Made with :heart: by Rubens Mariuzzo.

MIT License