Pop a new window in React, using window.open API
npm install react-new-window
> Inspired by David Gilbertson's article.
- 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_.
``sh`
npm i react-new-window --save
`js
import React from 'react'
import NewWindow from 'react-new-window'
const Demo = () => (
Hi 👋
)
`
When 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. |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 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.
The release process consists of two operations:
1. Create new version using: npm version`
2. This GitHub action will publish the new version to NPM.
- react-popout.
---