react-window-open 👋

A customizable component that opens a new window using the window.open API

Installation

npm i react-window-open

Demo 👀

https://axelmy-projects-showcase.firebaseapp.com/react-window-open

Usage 💻

``javascript
import React, { useState } from 'react'
import { NewWindow } from 'react-window-open'

const Example = () => {
const [isOpen, setIsOpen] = useState(false)
const [counter, setCounter] = useState(0)

return (
<>
setIsOpen(!isOpen)}>{!isOpen ? 'Open' : 'Close'}

{isOpen && setIsOpen(false)}>

This text is displayed in a new window. 👀

And all the states are shared ! 👌

Counter in the new window : {counter}

setCounter(counter+1)}>Increment from the new window
}

Counter on the original page : {counter}

setCounter(counter+1)}>Increment

)
}

export default Example
``

API ✔

| Properties | type | default | description |
|--|--|--|--|
| top | int | 0 | The bottom offset of the window |
| bottom | int | 0 | The top offset of the window |
| left | int | 0 | The left offset of the window |
| right | int | 0 | The right offset of the window |
| width | int | 0 | The width of the window |
| height | int | 0 | The height of the window |
| title | string | 0 | The title of the new window |
| onClose | func | | A callback function called whenever the window is closed |