react-window-wormhole

Extend your React App to other browser windows.

Demo

Usage

Install from npm

yarn add react-window-wormhole

Basic example

It's good to have router in the app if you want to use react-window-wormhole. Detailed example code is available here.

Code below is written in TypeScript.

// parent window
import { WormholeEntry } from 'react-window-wormhole'

interface PropsToTransfer {
  onAdd(val: number): void
  count: number
}

function Parent() {
  const [opened, setOpened] = useState(false)
  const [count, setCount] = useState(0)
  return (
    /* Data flows into entry of wormhole */
    <WormholeEntry<PropsToTransfer>
      {/* which path should child window */}
      path="/child"
      opened={opened}
      onClose={() => setOpened(false)}
      toTransfer={{
        onAdd(val: number) {
          setCount(c => c + val)
        },
        count,
      }}
    />
  )
}

// child window. render Child for path `/child`
import { WormholeExit } from 'react-window-wormhole'

function Child() {
  return (
    /* Exit is where data flows out */
    <WormholeExit<PropsToTransfer>>
      {props => (
        /* this `props` looks same as `toTransfer` */
        <button onClick={() => props.onAdd(1)}>{props.count}</button>
      )}
    </WormholeExit>
  )
}

API

WormholeEntry's props

Name	Type	Description
path	string	The path that child window should be opened in.
opened	boolean	Control child window to be opened or closed.
onClose	() => void	Callback to close child window, i.e. setting opened to false. Not callback when window is closed.
toTransfer	object	The props to pass to child window. You can pass plain object with values of transferable data and functions. You can simply take transferable data as something that can be safely handled by JSON.stringify. Arguments passed to those functions should be transferable data.
supportReload	boolean? (defaults to false)	It's not recommended to enable this. Enabling this will prevent child window to be closed when refresh. But delays the invoke of onClose.
reloadDuration	number? (defaults to 1000)	The duration between child window close and the invoke of onClose. It's dangerous to decrease its value.

WormholeExit's props

Name	Type	Description
children	(props) => void	Children should be a render function.

License

MIT