สร้าง Confirm Modal ใน React

การจัดการ Modal เป็นเรื่องที่พบเจอบ่อยสำหรับ Frontend Dev โดยเฉพาะถ้าคุณทำงานกับ React/Next.js หลายครั้งเราต้องเปิด, ปิด Modal และส่งข้อมูลให้แสดงผล ซึ่งบางทีก็มีโค้ดซ้ำซ้อนหรือต้องใช้ Context มาช่วย แต่วันนี้เราจะมาแชร์วิธีสร้าง Confirm Modal แบบ Minimal โดยใช้ Custom Hook ช่วยให้ชีวิตคุณง่ายขึ้น!

Step 1: สร้าง Confirm Modal Component

ไฟล์: ConfirmModal.tsx

import React from 'react';

interface ConfirmModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  data: { info?: string; title?: string; infoMode?: boolean };
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, onClose, onConfirm, data }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-50">
      <div className="bg-white rounded-lg p-6 shadow-lg w-full max-w-md">
        {/* Close Button */}
        <div className="flex justify-end">
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            ✕
          </button>
        </div>

        {/* Header */}
        <div className="text-center mb-4">
          {data.title && <h3 className="text-lg font-semibold mb-2">{data.title}</h3>}
          {data.info && <p className="text-gray-600">{data.info}</p>}
        </div>

        {/* Buttons */}
        <div className="flex justify-center gap-4 mt-4">
          {!data.infoMode && (
            <button
              data-testid="buttonCancel"
              className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
              onClick={onClose}
            >
              ยกเลิก
            </button>
          )}
          <button
            data-testid="buttonConfirm"
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
            onClick={onConfirm}
          >
            ยืนยัน
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmModal;

Key Features

• ใช้ props เพื่อควบคุม Modal อย่างยืดหยุ่น (isOpen, onClose, onConfirm, data).
• สามารถส่งข้อมูล title และ info ผ่าน data object.
• ปรับปุ่มให้แสดงหรือซ่อนตาม infoMode.

Step 2: สร้าง Custom Hook สำหรับควบคุม Modal

ไฟล์: useModal.ts

import { useState } from 'react';

export const useModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [modalData, setModalData] = useState<any>(null);

  const openModal = (data: any) => {
    setModalData(data);
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
    setModalData(null);
  };

  return {
    isOpen,
    modalData,
    openModal,
    closeModal,
  };
};

Custom Hook นี้ทำอะไร?

• จัดการ state isOpen และ modalData อย่างง่าย.
• ฟังก์ชัน openModal เปิด Modal พร้อมส่งข้อมูลที่ต้องการ.
• ฟังก์ชัน closeModal ปิด Modal และรีเซ็ตข้อมูล.

Step 3: ใช้ ConfirmModal และ Hook ใน Component

ไฟล์: ExampleComponent.tsx

import React from 'react';
import ConfirmModal from './ConfirmModal';
import { useModal } from './useModal';

const ExampleComponent: React.FC = () => {
  const { isOpen, modalData, openModal, closeModal } = useModal();

  const handleConfirm = () => {
    console.log('Confirmed!');
    closeModal();
  };

  return (
    <div className="p-6">
      <button
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        onClick={() => openModal({ info: 'รายละเอียด', title: 'หัวข้อ', infoMode: false })}
      >
        เปิด Modal
      </button>

      {/* Modal */}
      <ConfirmModal
        isOpen={isOpen}
        onClose={closeModal}
        onConfirm={handleConfirm}
        data={modalData}
      />
    </div>
  );
};

export default ExampleComponent;

สิ่งที่เกิดขึ้น

1. ใช้ Hook useModal เพื่อจัดการสถานะของ Modal (isOpen, modalData).
2. เปิด Modal พร้อมส่งข้อมูล (title, info) ด้วย openModal.
3. ปิด Modal ด้วย closeModal.
4. จัดการการยืนยันผ่าน onConfirm.

สรุป

ในบทความนี้ เราได้เรียนรู้การสร้าง Confirm Modal ใน React/Next.js อย่างมีประสิทธิภาพโดยใช้ Custom Hook (useModal) แทนการใช้ Service สไตล์ Angular ซึ่งช่วยให้โค้ดของคุณสะอาด, ยืดหยุ่น และง่ายต่อการนำไปใช้ซ้ำในโปรเจกต์อื่น ๆ อีกด้วย!