react-window-opener

0.0.7 • Public • Published

react-window-opener

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

NPM JavaScript Style Guide

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-window-opener

Weekly Downloads

210

Version

0.0.7

License

MIT

Unpacked Size

20.1 kB

Total Files

6

Last publish

Collaborators

  • ahakim