[React] カスタムダイアログの実装！

はじめに

今回は、Reactでカスタムダイアログを実装する方法を紹介します！

1. 必要なパッケージのインストール

まず、Material-UIおよびemotion関連のパッケージをインストールします！

npm install @mui/material
npm install @emotion/react
npm install @emotion/styled

2. カスタムダイアログコンポーネントの作成

CustomDialog.jsxファイルを作成します！
このコンポーネントは、Material-UIのDialogコンポーネントをカスタマイズしています！

主なカスタマイズは以下の３点です。

• topとleftのスタイルプロパティを使用して、ダイアログの表示位置を調整
• DialogContentTextコンポーネント内で、テキストのフォントサイズとテキストの中央揃えを設定
• ダイアログ内のボタンに対しても、fontSizeスタイルを設定

好みに合うように、適時調節してください！

// src/components/CustomDialog.jsx
import * as React from "react";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import Button from "@mui/material/Button";

export default function CustomDialog({
  isOpen,
  content,
  confirmButtonLabel,
  cancelButtonLabel,
  onConfirm,
  onCancel,
}) {
  return (
    <React.Fragment>
      {/* Dialogコンポーネントの利用 */}
      <Dialog
        open={isOpen}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        sx={{
          top: "-85%",  // ダイアログの表示位置のカスタマイズ
          left: "0%",   // ダイアログの表示位置のカスタマイズ
        }}
      >
        {/* DialogContentコンポーネントの利用 */}
        <DialogContent>
          {/* DialogContentTextコンポーネントの利用 */}
          <DialogContentText
            id="alert-dialog-description"
            sx={{ fontSize: "25px", textAlign: "center" }}  // ダイアログのテキストスタイルのカスタマイズ
          >
            {content}
          </DialogContentText>
        </DialogContent>

        {/* DialogActionsコンポーネントの利用 */}
        <DialogActions>
          {/* Buttonコンポーネントの利用 */}
          <Button onClick={onConfirm} sx={{ fontSize: "20px" }}>
            {confirmButtonLabel}
          </Button>
          {/* Buttonコンポーネントの利用 */}
          <Button onClick={onCancel} sx={{ fontSize: "20px" }}>
            {cancelButtonLabel}
          </Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}

3. テストダイアログの作成

次に、テストダイアログ用のTestDialog.jsxファイルを作成します！
コンテントの中身を変更することで、表示されるテキストが変更されます！
また、confirmButtonLabelとcancelButtonLabelの値を変更することで、ボタンの名前が変更されます！

// src/components/TestDialog.jsx
import * as React from "react";
import CustomDialog from "./CustomDialog";

export default function TestDialog({ isOpen, onConfirm, onCancel }) {
  const content = "テストカスタムダイアログ";

  return (
    <CustomDialog
      isOpen={isOpen}
      content={content}
      confirmButtonLabel="OK"
      cancelButtonLabel="キャンセル"
      onConfirm={onConfirm}
      onCancel={onCancel}
    />
  );
}

4. メインコンポーネントへの組み込み

最後に、index.jsxへ組み込みます！
onConfirmとonCancelの中身を変更することで、ボタンを押したときの挙動を変更できます！

// pages/index.jsx

import { useState } from "react";
import TestDialog from "../components/TestDialog";

export default function HomePage() {
  // カスタムダイアログ表示、非表示管理
  const [testDialogOpen, setTestDialogOpen] = useState(false);

  // ダイアログ表示ボタンクリック処理
  const buttonClickHome = () => {
    setTestDialogOpen(true);
  };

  return (
    <div>
      {/* カスタムダイアログ */}
      <TestDialog
        isOpen={testDialogOpen}
        onConfirm={() => {
          setTestDialogOpen(false);
          console.log("okが押されました");
        }}
        onCancel={() => {
          setTestDialogOpen(false);
          console.log("キャンセルが押されました");
        }}
      />

      <button onClick={buttonClickHome}>カスタムダイアログ表示</button>
    </div>
  );
}

ホーム画面

表示されたカスタムダイアログ

okとキャンセルを一回づつ押した時のコンソール画面

まとめ

以上で、カスタムダイアログの実装が完了しました！
今回の記事を参考に、各自のプロジェクトに追加してみてください！