react-modalでモーダルウィンドウを作る(Typescript)

モーダルウィンドウの作成

前提

以前作成した下記の環境からスタートします。

react-modal

yarn add react-modal
yarn add -D @types/react-modal

src>app.tsx

下記が以前作成したコード

import React from "react";

const App = () => <h1>Hello World</h1>;
export default App;

上記のコードをreact-modalをimport、useStateでモーダルを管理

import React, { useState } from "react";
import Modal from "react-modal";

const App = () => {
const [modal, setModal] = useState(false);

const openModal = () => {
    setModal(true);
};
const closeModal = () => {
    setModal(false);
};
return (
    <>
    <button onClick={openModal}>modal</button>
    <Modal isOpen={modal}>
        <button onClick={closeModal}>close</button>
        <h1>Hello World</h1>
    </Modal>
    </>
);
};
export default App;

最後に

1. 環境構築の段階でpackage.jsonのscriptsに
   "start": "npx webpack serve --config webpack.config.js" を書き込んでいる
2. yarn startを実行
3. port番号を8111に設定しているので、ブラウザでhttp://localhost:8111にアクセス

modalボタンをクリックするとモーダルが出てきて、Hello Worldが表示される！
(closeボタンで元に戻る)