react-new-window #react #js

react-new-window.md

Overview

rmariuzzo/react-new-window - github.com
Storybook

• react で open window するやつ
• createPortal を使っているらしい
  • https://david-gilbertson.medium.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

Getting Started

$ npm i react-new-window

import React from 'react'
import NewWindow from 'react-new-window'
import { useDisclosure, Button } from '@chakra-ui/react'

export const MyContainer = () => {
  const {
    isOpen,
    onOpen,
    onClose,
  } = useDisclosure()

  return <>
    <Button onClick={onOpen}>
      click
    </Button>
    {
      isOpen &&
      <NewWindow onUnload={onClose}>
        <h1>Hi 👋</h1>
      </NewWindow>
    }
  </>
}