Reactモーダルライブラリ比較: react-modal vs react-modal-hook vs react-modal-promise

モーダルダイアログはWebアプリケーションでよく使うUIパターンですが、Reactでは状態管理やアクセシビリティ対応が意外と面倒です。この記事では、代表的な3つのモーダルライブラリ — react-modal、react-modal-hook、react-modal-promise — の技術的違いを、実際のコードを交えて詳しく解説します。

🧱 基本設計思想の違い

react-modal は「コンポーネントベース」のアプローチを取ります。モーダル自体がReactコンポーネントであり、親コンポーネントがisOpenプロパティで表示・非表示を制御します。これは最も直感的で、多くの開発者が最初に思いつく形です。

react-modal-hook は「フック中心」の設計です。モーダルの表示状態と制御ロジックをカスタムフックに閉じ込め、コンポーネント側は純粋にUIのレンダリングに集中できます。

react-modal-promise は「Promiseベース」のインターフェースを提供します。モーダルを開く関数がPromiseを返し、ユーザーの操作結果をawaitで受け取れます。これはアラートや確認ダイアログのような単純なインタラクションに最適です。

🔌 基本的な使い方とコード例

react-modal: コンポーネントとして直接使う

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

// アプリ全体で一度だけ設定
Modal.setAppElement('#root');

function App() {
  const [modalIsOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>モーダルを開く</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="Example Modal"
      >
        <h2>こんにちは！</h2>
        <button onClick={() => setIsOpen(false)}>閉じる</button>
      </Modal>
    </div>
  );
}

react-modal-hook: フックで状態を管理

import React from 'react';
import { useModal } from 'react-modal-hook';

function MyModal({ hide }) {
  return (
    <div className="modal">
      <h2>こんにちは！</h2>
      <button onClick={hide}>閉じる</button>
    </div>
  );
}

function App() {
  const [showModal, hideModal] = useModal(() => (
    <MyModal hide={hideModal} />
  ));

  return (
    <button onClick={showModal}>モーダルを開く</button>
  );
}

react-modal-promise: Promiseで結果を受け取る

import React from 'react';
import { modal } from 'react-modal-promise';

function ConfirmModal({ onResolve, onReject }) {
  return (
    <div className="modal">
      <p>本当に削除しますか？</p>
      <button onClick={() => onResolve(true)}>はい</button>
      <button onClick={() => onReject()}>いいえ</button>
    </div>
  );
}

async function handleDelete() {
  try {
    const result = await modal(ConfirmModal);
    if (result) {
      // 削除処理
      console.log('削除しました');
    }
  } catch (e) {
    // キャンセルされた場合
    console.log('キャンセルされました');
  }
}

function App() {
  return <button onClick={handleDelete}>削除</button>;
}

🧩 複数モーダルの管理

複数のモーダルを同じ画面で使う場合、それぞれの状態をどう管理するかが重要です。

react-modal では、各モーダルごとにuseStateフックを用意する必要があります。

const [isInfoOpen, setInfoOpen] = useState(false);
const [isSettingsOpen, setSettingsOpen] = useState(false);

react-modal-hook は、フックを複数回呼び出すだけで自然に独立した状態を管理できます。

const [showInfo, hideInfo] = useModal(() => <InfoModal hide={hideInfo} />);
const [showSettings, hideSettings] = useModal(() => <SettingsModal hide={hideSettings} />);

react-modal-promise は、各モーダルを別々の関数として定義し、それぞれを独立して呼び出せます。

const showInfo = () => modal(InfoModal);
const showSettings = () => modal(SettingsModal);

⌨️ アクセシビリティとフォーカストラップ

モーダルはキーボード操作やスクリーンリーダー対応が必須ですが、各ライブラリの対応状況は異なります。

react-modal は、aria属性やフォーカストラップを自動で処理してくれます（ただしsetAppElementの設定が必要）。これは大きな利点です。

react-modal-hook と react-modal-promise は、モーダルのDOM構造や振る舞いを完全に開発者に委ねるため、アクセシビリティ対応は自前で実装する必要があります。例えば、モーダル表示時にフォーカスを内部に移動させ、Escキーで閉じられるようにするといった処理です。

📦 カスタマイズ性と柔軟性

react-modal は、スタイルやアニメーションを細かく制御できます。overlayClassNameやclassNameでCSSクラスを指定でき、トランジションも容易です。

react-modal-hook は、モーダルのルート要素を自由に設計できるため、ポータルを使わず通常のDOM階層内に配置することも可能です（ただし、通常はReactDOM.createPortalを使います）。

react-modal-promise は、モーダルの見た目よりも「結果をどう扱うか」に焦点を当てているため、UIのカスタマイズは他の2つほど自由ではありません。ただし、渡すコンポーネント次第では十分柔軟です。

🔄 状態管理との統合

ReduxやZustandなどの状態管理ライブラリと連携する場合：

• react-modal は、グローバル状態からisOpenを読み取って制御できます。
• react-modal-hook は、フック内でグローバル状態を参照・更新できますが、少し工夫が必要です。
• react-modal-promise は、モーダルの結果をグローバル状態に反映する処理をonResolve内で書くのが自然です。

🛑 非推奨やメンテナンス状況について

執筆時点（2024年）で、いずれのパッケージも公式に非推奨とはされておらず、GitHubリポジトリもアクティブに更新されています。ただし、react-modalは歴史が長く、TypeScript対応や最新のReact機能への追従がやや遅れる傾向があります。一方、react-modal-hookとreact-modal-promiseは比較的新しく、Hooks時代のベストプラクティスに沿った設計になっています。

💡 実践的な選定ガイド

ケース1: 複雑なフォーム入りモーダル

ユーザー登録や設定変更など、入力項目が多く状態が複雑なモーダルの場合：

• ✅ 推奨: react-modal
• 理由: コンポーネントとして独立して状態を持たせやすく、フォームライブラリ（例：React Hook Form）との統合も自然です。

ケース2: 複数の簡易モーダルを同一画面で使う

ヘルプ、通知、フィルタ設定など、小さなモーダルをいくつも使う場合：

• ✅ 推奨: react-modal-hook
• 理由: 各モーダルの表示ロジックを独立したフックとして管理でき、コンポーネントが肥大化しません。

ケース3: 確認ダイアログやアラート

「保存しますか？」や「削除してもよろしいですか？」のような単純な選択を行う場合：

• ✅ 推奨: react-modal-promise
• 理由: Promiseで結果を受け取れるため、手続き的なコードフローが非常にシンプルになります。

📊 まとめ: 主な違い一覧

💬 最後に

モーダルライブラリを選ぶ際は、「UIの複雑さ」と「結果の扱い方」の2軸で考えると良いでしょう。

• UIが複雑で状態が多い → react-modal
• 複数のモーダルをきれいに管理したい → react-modal-hook
• 単純な確認で結果を非同期に待ちたい → react-modal-promise

どのライブラリも一長一短ありますが、要件に合ったものを選べば、モーダル周りのコードがぐっとシンプルになります。