Reactでモーダルの挙動を実装する方法

React

Reactでモーダルの挙動を実装する方法

Reactでモーダルの開閉を実装する方法はいくつかありますが、基本的な手順を以下に示します。
まずはStateを使用してモーダルの表示・非表示を管理する方法を説明します。

1. Stateを使用したモーダルの管理

まず、モーダルの表示状態を管理するためのStateを作成します。
次に、モーダルの表示・非表示を切り替える関数を作成します。

例: モーダルのコンポーネント
import React, { useState } from 'react';

// モーダルのコンポーネント
const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) {
    return null;
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>モーダルタイトル</h2>
        <p>これはモーダルの内容です。</p>
        <button onClick={onClose}>閉じる</button>
      </div>
    </div>
  );
};

// モーダルを呼び出す側のコンポーネント
const App = () => {
  const [isModalOpen, setModalOpen] = useState(false);

  const openModal = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>モーダルを開く</button>
      <Modal isOpen={isModalOpen} onClose={closeModal} />
    </div>
  );
};

export default App;

解説

1. Stateの設定:
isModalOpenというStateを使ってモーダルの表示状態を管理しています。

2. モーダルの表示・非表示:
ボタンのクリックイベントでopenModalとcloseModal関数を呼び出し、モーダルの表示・非表示を切り替えています。

3. モーダルのコンポーネント:
Modalコンポーネントは、isOpenプロップでモーダルの表示状態を受け取り、onCloseプロップで閉じるための関数を受け取ります。

この方法で、基本的なモーダルの開閉を実装できます。
必要に応じて、モーダルの内容やスタイルをカスタマイズしてください。

ライブラリを使用する方法

Reactでモーダルを簡単に実装するために、ライブラリを使用する方法もあります。
以下では、ポピュラーなライブラリであるreact-modalを使用した方法を紹介します。

react-modal のインストール

まず、react-modalをインストールします。
ターミナルで以下のコマンドを実行してください。

npmの場合

npm install react-modal

yarnの場合

yarn add react-modal

モーダルの実装

react-modalを使用してモーダルの開閉を実装する例を示します。

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

// モーダルのルート要素を設定（アプリケーションのルート要素と一致させる）
Modal.setAppElement('#root');

const App = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => setModalIsOpen(true);
  const closeModal = () => setModalIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>モーダルを開く</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        style={{ 任意のスタイル }}
      >
        <h2>モーダルタイトル</h2>
        <p>これはモーダルの内容です。</p>
        <button onClick={closeModal}>閉じる</button>
      </Modal>
    </div>
  );
};

export default App;

解説

1. インポートと設定:

  • react-modalをインポートし、Modal.setAppElement('#root')でアプリケーションのルート要素を設定します。

この設定は、モーダルが適切にフォーカスを管理するために必要です。

2. Stateの設定:

  • modalIsOpenというStateを使ってモーダルの表示状態を管理しています。

3. モーダルの表示・非表示:

  • ボタンのクリックイベントでopenModalとcloseModal関数を呼び出し、モーダルの表示・非表示を切り替えています。

4. react-modalの使用:

  • ModalコンポーネントのisOpenでモーダルの表示状態を制御し、onRequestCloseでモーダルを閉じるための関数を指定しています。
  • styleを使用してモーダルとオーバーレイのスタイルをカスタマイズしています。

この方法を使うことで、Reactでモーダルを簡単に実装できます。
react-modalは多機能で柔軟性があり、必要に応じてさらにカスタマイズが可能です。