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 💻

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

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

    return (
        <>
            <button onClick={() => setIsOpen(!isOpen)}>{!isOpen ? 'Open' : 'Close'}</button>

            {isOpen && <NewWindow onClose={() => setIsOpen(false)}>
                <p>This text is displayed in a new window. 👀</p>
                <p>And all the states are shared ! 👌</p>
                <p>Counter in the new window : {counter}</p>
                <button onClick={() => setCounter(counter+1)}>Increment from the new window</button>
            </NewWindow>}

            <p>Counter on the original page : {counter}</p>
            <button onClick={() => setCounter(counter+1)}>Increment</button>
        </>
    )
}

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 |