https://github.com/rmariuzzo/react-new-window

🔲 Pop new windows in React, using `window.open`.
https://github.com/rmariuzzo/react-new-window

popup popup-window react react-component window-opener

Last synced: 14 days ago
JSON representation

🔲 Pop new windows in React, using `window.open`.

• Host: GitHub
• URL: https://github.com/rmariuzzo/react-new-window
• Owner: rmariuzzo
• License: mit
• Created: 2017-11-08T15:30:59.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-07-31T20:44:50.000Z (3 months ago)
• Last Synced: 2024-10-28T10:01:06.540Z (16 days ago)
• Topics: popup, popup-window, react, react-component, window-opener
• Language: JavaScript
• Homepage: https://rmariuzzo.github.io/react-new-window/
• Size: 6.67 MB
• Stars: 447
• Watchers: 9
• Forks: 110
• Open Issues: 58
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-humanscape - react-new-window - 새로운 창을 띄워주는 컴포넌트 (React, React Native / Components)

README

        
[![React New Window - Pop new windows in React, using window.open API.](.github/banner.svg)](#features)

> Inspired by [David Gilbertson's article](https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).

## 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 = () => (

  

    
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.

## 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).

---

 


Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)