├── .babelrc.js
├── .eslintignore
├── .eslintrc
├── .github
├── banner.svg
└── workflows
│ └── publish.yml
├── .gitignore
├── .nvmrc
├── .prettierrc
├── .storybook
├── addons.js
├── config.js
└── preview-head.html
├── .travis.yml
├── LICENSE
├── README.md
├── docs
├── 0.832dfd222af123ce2f31.manager.bundle.js
├── 4.db02a1c3f1659cbe21f6.manager.bundle.js
├── 4.db02a1c3f1659cbe21f6.manager.bundle.js.LICENSE.txt
├── 5.4d53f3bd7dac3d5945b8.manager.bundle.js
├── 5.4d53f3bd7dac3d5945b8.manager.bundle.js.LICENSE.txt
├── 6.8ba05c71d52a3d82cda0.manager.bundle.js
├── 7.318ff74319aa6c7eeb31.manager.bundle.js
├── favicon.ico
├── iframe.html
├── index.html
├── main.1d1e3042.iframe.bundle.js
├── main.1d44ffca4e30d87db952.manager.bundle.js
├── runtime~main.bf4428eb.iframe.bundle.js
├── runtime~main.c70d5de959612a6c5779.manager.bundle.js
├── vendors~main.15124dc5.iframe.bundle.js
├── vendors~main.15124dc5.iframe.bundle.js.LICENSE.txt
├── vendors~main.15124dc5.iframe.bundle.js.map
├── vendors~main.7dd5fda8ce8b35154eed.manager.bundle.js
└── vendors~main.7dd5fda8ce8b35154eed.manager.bundle.js.LICENSE.txt
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
└── NewWindow.js
├── stories
├── components
│ ├── Button.js
│ ├── Col.js
│ ├── Container.js
│ ├── Row.js
│ └── TextInput.js
├── default.stories.js
├── features-prop.stories.js
├── prop-close-on-unmount.stories.js
├── text-box.stories.js
├── title-prop.stories.js
└── url-prop.stories.js
└── types
└── NewWindow.d.ts
/.babelrc.js:
--------------------------------------------------------------------------------
1 | module.exports = api => {
2 | api.cache(true)
3 |
4 | return {
5 | "presets": ["@babel/preset-env", "@babel/preset-react"],
6 | "plugins": [
7 | '@babel/plugin-proposal-class-properties',
8 | '@babel/plugin-transform-runtime',
9 | ]
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | es
2 | umd
3 | stories
4 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "eslint:recommended",
4 | "plugin:react/recommended"
5 | ],
6 | "plugins": [
7 | "react",
8 | "prettier"
9 | ],
10 | "rules": {
11 | "prettier/prettier": "error",
12 | "no-console": ["error", { "allow": ["warn", "error"] }]
13 | },
14 | "parser": "babel-eslint",
15 | "env": {
16 | "browser": true
17 | },
18 | "settings": {
19 | "react": {
20 | "version": "detect"
21 | }
22 | }
23 | }
--------------------------------------------------------------------------------
/.github/banner.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
1 | name: Publish new versions to registry
2 |
3 | on:
4 | create:
5 | tags:
6 | - "v[0-9]+.[0-9]+.[0-9]+-**"
7 |
8 | jobs:
9 | publish:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v3
13 |
14 | - name: Setup node
15 | uses: actions/setup-node@v3
16 | with:
17 | node-version-file: ".nvmrc"
18 | registry-url: "https://registry.npmjs.org"
19 |
20 | - name: Get npm cache directory
21 | id: npm-cache-dir
22 | run: |
23 | echo "::set-output name=dir::$(npm config get cache)"
24 | - uses: actions/cache@v3
25 | with:
26 | path: ${{ steps.npm-cache-dir.outputs.dir }}
27 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
28 | restore-keys: |
29 | ${{ runner.os }}-node-
30 |
31 | - name: Install dependencies
32 | run: npm i
33 |
34 | - name: Build assets
35 | run: npm run build
36 |
37 | - name: Publish to registry
38 | env:
39 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
40 | run: npm publish
41 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | es
3 | umd
4 | lib
5 | *.log
6 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v18.12.1
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "semi": false
4 | }
5 |
--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 |
--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/react'
2 |
3 | const req = require.context('../stories', true, /\.stories\.js$/)
4 | function loadStories() {
5 | req.keys().forEach(filename => req(filename))
6 | }
7 |
8 | configure(loadStories, module)
--------------------------------------------------------------------------------
/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "stable"
4 | cache:
5 | directories:
6 | - node_modules
7 | script:
8 | - npm run lint
9 | - npm run build
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Rubens Mariuzzo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](#features)
2 |
3 | > Inspired by [David Gilbertson's article](https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).
4 |
5 |
6 |
7 | ## Features
8 |
9 | - **Only 3.68KB** (gzipped!).
10 | - **Support the full `window.open` api**.
11 | - **Built for React 16** (uses `ReactDOM.createPortal`).
12 | - **Handler for blocked popups** (via `onBlock` prop).
13 | - **Center popups** according to the parent _window_ or _screen_.
14 |
15 | ## Installation
16 |
17 | ```sh
18 | npm i react-new-window --save
19 | ```
20 |
21 | ## Usage
22 |
23 | ```js
24 | import React from 'react'
25 | import NewWindow from 'react-new-window'
26 |
27 | const Demo = () => (
28 |
29 |
Hi 👋
30 |
31 | )
32 | ```
33 |
34 | When **``** is mounted a popup window will be opened. When unmounted then the popup will be closed.
35 |
36 | 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.
37 |
38 | ## Documentation
39 |
40 | | Properties | Type | Default | Description |
41 | | ---------------- | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
42 | | `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)). |
43 | | `name` | `String` | ` ` | The name of the window ([more details on `windowName`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)). |
44 | | `title` | `String` | ` ` | The title of the new window document. |
45 | | `features` | `Object` | `{}` | The set of window features ([more details on `windowFeatures`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features)). |
46 | | `onUnload` | `Function` | `undefined` | A function to be triggered before the new window unload. |
47 | | `onBlock` | `Function` | `undefined` | A function to be triggered when the new window could not be opened. |
48 | | `onOpen` | `Function(w: Window)` | `undefined` | A function to be triggered when window open by library. |
49 | | `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_. |
50 | | `copyStyles` | `Boolean` | `true` | If specified, copy styles from parent window's document. |
51 | | `closeOnUnmount` | `Boolean` | `true` | If specified, close the new window on unmount. |
52 |
53 | ## Tests
54 |
55 | Tests are manually done using Storybook. It can be run locally with: `yarn storybook`.
56 |
57 | ## Development
58 |
59 | To start contributing to this project, please do:
60 |
61 | 1. Fork and clone this repo.
62 | 2. Do your work.
63 | 3. Create a PR.
64 |
65 | ## Releases
66 |
67 | The release process consists of two operations:
68 |
69 | 1. Create new version using: `npm version`
70 | 2. [This GitHub action](.github/workflows/publish.yml) will publish the new version to NPM.
71 |
72 | ### Prior work
73 |
74 | - [react-popout](https://github.com/JakeGinnivan/react-popout).
75 |
76 | ---
77 |
78 |
79 |
80 | Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).
81 |
82 | [MIT License](LICENSE)
83 |
84 |