Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
react-new-window
Advanced tools
Readme
Inspired by David Gilbertson's article.
window.open
api.ReactDOM.createPortal
).onBlock
prop).npm i react-new-window --save
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.
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:
The release process consists of two operations:
npm version
Made with :heart: by Rubens Mariuzzo.
FAQs
Pop a new window in React, using window.open API
The npm package react-new-window receives a total of 41,724 weekly downloads. As such, react-new-window popularity was classified as popular.
We found that react-new-window demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.