react-new-window
Version:
Pop a new window in React, using window.open API
85 lines (56 loc) • 4.95 kB
Markdown
[](#features)
> Inspired by [David Gilbertson's article](https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).
</div>
## 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
```sh
npm i react-new-window --save
```
## Usage
```js
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`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)). |
| `name` | `String` | ` ` | The name of the window ([more details on `windowName`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)). |
| `title` | `String` | ` ` | The title of the new window document. |
| `features` | `Object` | `{}` | The set of window features ([more details on `windowFeatures`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features)). |
| `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:
1. Fork and clone this repo.
2. Do your work.
3. Create a PR.
## Releases
The release process consists of two operations:
1. Create new version using: `npm version`
2. [This GitHub action](.github/workflows/publish.yml) will publish the new version to NPM.
### Prior work
- [react-popout](https://github.com/JakeGinnivan/react-popout).
---
<div align=center>
Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).
[MIT License](LICENSE)
</div>