react-window-opener

A small reactjs utility to make sure that window.open actually opens popup and cominecate with the parent window.opener

• Why I may use this
• Demo
• Install
• Usage for React App
• How To use it in NextJs App
• Props

Why I may use this

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'،

Demo

https://ahakem.github.io/react-window.opener/#/

Install

npm install react-window-opener

or

yarn add react-window-opener

Usage for React App

Parent Page

 
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}>
      )
}

Child Page (The PopUp)

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>
    </>
  )
}

How To use it in NextJs App

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 })
 

Props

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

License

MIT © ahakem

credits

The idea came from this repo with some enhancment EnetoJara/window-opener