[React] Reactでポップアップ領域を作成する方法

はじめに

今回は、ページ内へポップアップ領域を表示する方法について紹介します！
HTMLの <div> 要素を使用してポップアップ領域を作成し、Reactの状態管理を活用します。

1. PopUpコンポーネントの作成

まず、ポップアップ領域を管理する PopUp コンポーネントを作成します。
状態を使用してポップアップの表示・非表示を切り替えます！

// components/PopUp.js
import React, { useState } from "react";
import styles from "../styles/PopUp.module.css";

const PopUp = () => {
  const [isPopUpVisible, setPopUpVisible] = useState(false);

  const togglePopUp = () => {
    setPopUpVisible(!isPopUpVisible);
  };

  return (
    <div>
      <button onClick={togglePopUp}>ポップアップを開く</button>

      {isPopUpVisible && (
        <div className={styles.PopUp}>
          {/* ポップアップの中身 */}
          <p>ここにポップアップの内容を記述します。</p>
          <button onClick={togglePopUp}>閉じる</button>
        </div>
      )}
    </div>
  );
};

export default PopUp;

/* styles/PopUp.module.css */
.PopUp {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

2. フォームをページに組み込む

次に、作成した PopUp コンポーネントをページに組み込みます！

// pages/index.js
import React from 'react';
import PopUp from '../components/PopUp';

const HomePage = () => {
  return (
    <div>
      <h1>ポップアップ領域を作成する</h1>
      <PopUp />
    </div>
  );
};

export default HomePage;

まとめ

今回は、ページ内へポップアップ領域を表示する方法について紹介しました！
この記事を参考に、色々試してみてください！