A small reactjs utility to make sure that window.open actually opens popup and cominecate with the parent window.opener
If you are using React and opening a window popup for any reason like Google authentication, for example, you will need to pass the data back to the parent page. but as you are using react you can't access the function in your page components via 'window.opener'،
https://ahakem.github.io/react-window.opener/#/
npm install react-window-opener
or
yarn add react-window-opener
import WindowOpener from 'react-window-opener'
export default function Example {
const childResponse = (err, res) => {
if (err) {
console.log(res, 'err')
}
console.log(res, 'res')
}
return (
<WindowOpener url='/popUp-URL' bridge={childResponse}>
)
}
just pass the needed data using
window.opener.onSuccess(state)
export default function SmallWindow() {
const [state, setstate] = useState('')
const update = (evt) => {
setstate(evt.target.value)
window.opener.onSuccess(state)
}
return (
<>
<input value={state} onChange={update} />
<button
onClick={() => {
window.close()
}}
>
Close Me
</button>
</>
)
}
All you need to import it like that more info here
import dynamic from 'next/dynamic'
const WindowOpener = dynamic(() => import('react-window-opener'), { ssr: false })
Params | Value | Default Value | Description |
---|---|---|---|
url | string | REQUIRED | the url for the page which will open in the popup |
bridge | function | REQUIRED | Function to handel the result that you will pass from the child popup |
width | number | 300 | PopUp Width |
height | number | 400 | PopUp Height |
className | Empty |
MIT © ahakem
The idea came from this repo with some enhancment EnetoJara/window-opener