{"id":13600750,"url":"https://github.com/rmariuzzo/react-new-window","last_synced_at":"2025-05-15T10:01:35.020Z","repository":{"id":26894331,"uuid":"109993997","full_name":"rmariuzzo/react-new-window","owner":"rmariuzzo","description":"🔲 Pop new windows in React, using `window.open`.","archived":false,"fork":false,"pushed_at":"2024-07-31T20:44:50.000Z","size":6995,"stargazers_count":451,"open_issues_count":59,"forks_count":111,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-09T01:39:01.876Z","etag":null,"topics":["popup","popup-window","react","react-component","window-opener"],"latest_commit_sha":null,"homepage":"https://rmariuzzo.github.io/react-new-window/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rmariuzzo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-08T15:30:59.000Z","updated_at":"2025-04-17T02:43:16.000Z","dependencies_parsed_at":"2024-01-14T06:04:50.566Z","dependency_job_id":"4ce91191-0a3b-4a53-9c25-d9ab7a1cb221","html_url":"https://github.com/rmariuzzo/react-new-window","commit_stats":{"total_commits":106,"total_committers":22,"mean_commits":4.818181818181818,"dds":"0.21698113207547165","last_synced_commit":"2e576d739e9a1a2df2752d00355ee5bcf8c5385a"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-new-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-new-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-new-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmariuzzo%2Freact-new-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rmariuzzo","download_url":"https://codeload.github.com/rmariuzzo/react-new-window/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319715,"owners_count":22051072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["popup","popup-window","react","react-component","window-opener"],"created_at":"2024-08-01T18:00:47.816Z","updated_at":"2025-05-15T10:01:34.690Z","avatar_url":"https://github.com/rmariuzzo.png","language":"JavaScript","funding_links":[],"categories":["React, React Native"],"sub_categories":["Components"],"readme":"[![React New Window - Pop new windows in React, using window.open API.](.github/banner.svg)](#features)\n\n\u003e Inspired by [David Gilbertson's article](https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).\n\n\u003c/div\u003e\n\n## Features\n\n- **Only 3.68KB** (gzipped!).\n- **Support the full `window.open` api**.\n- **Built for React 16** (uses `ReactDOM.createPortal`).\n- **Handler for blocked popups** (via `onBlock` prop).\n- **Center popups** according to the parent _window_ or _screen_.\n\n## Installation\n\n```sh\nnpm i react-new-window --save\n```\n\n## Usage\n\n```js\nimport React from 'react'\nimport NewWindow from 'react-new-window'\n\nconst Demo = () =\u003e (\n  \u003cNewWindow\u003e\n    \u003ch1\u003eHi 👋\u003c/h1\u003e\n  \u003c/NewWindow\u003e\n)\n```\n\nWhen **`\u003cNewWindow /\u003e`** is mounted a popup window will be opened. When unmounted then the popup will be closed.\n\nThe `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.\n\n## Documentation\n\n| Properties       | Type                  | Default     | Description                                                                                                                                                                                                         |\n| ---------------- | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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)).                                                             |\n| `name`           | `String`              | ` `         | The name of the window ([more details on `windowName`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)).                                                                                              |\n| `title`          | `String`              | ` `         | The title of the new window document.                                                                                                                                                                               |\n| `features`       | `Object`              | `{}`        | The set of window features ([more details on `windowFeatures`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features)).                                                                      |\n| `onUnload`       | `Function`            | `undefined` | A function to be triggered before the new window unload.                                                                                                                                                            |\n| `onBlock`        | `Function`            | `undefined` | A function to be triggered when the new window could not be opened.                                                                                                                                                 |\n| `onOpen`         | `Function(w: Window)` | `undefined` | A function to be triggered when window open by library.                                                                                                                                                             |\n| `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_. |\n| `copyStyles`     | `Boolean`             | `true`      | If specified, copy styles from parent window's document.                                                                                                                                                            |\n| `closeOnUnmount` | `Boolean`             | `true`      | If specified, close the new window on unmount.                                                                                                                                                                      |\n\n## Tests\n\nTests are manually done using Storybook. It can be run locally with: `yarn storybook`.\n\n## Development\n\nTo start contributing to this project, please do:\n\n1.  Fork and clone this repo.\n2.  Do your work.\n3.  Create a PR.\n\n## Releases\n\nThe release process consists of two operations:\n\n1.  Create new version using: `npm version`\n2.  [This GitHub action](.github/workflows/publish.yml) will publish the new version to NPM.\n\n### Prior work\n\n- [react-popout](https://github.com/JakeGinnivan/react-popout).\n\n---\n\n \u003cdiv align=center\u003e\n\nMade with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).\n\n[MIT License](LICENSE)\n\n \u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmariuzzo%2Freact-new-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frmariuzzo%2Freact-new-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmariuzzo%2Freact-new-window/lists"}