Modal windows adalah elemen UI umum dalam aplikasi web. Mereka digunakan untuk menampilkan informasi penting, meminta input pengguna, atau mengonfirmasi tindakan. Meskipun jendela modal bisa membantu, jendela modal juga bisa sulit dikelola, terutama jika Anda memiliki beberapa modal di halaman Anda.

Pada artikel ini, kami akan menunjukkan cara membuat useModalhook di React yang menyederhanakan pembuatan dan pengelolaan jendela modal. Dengan hook ini, Anda dapat dengan mudah membuka dan menutup modals, meneruskan data ke sana, dan menangani interaksi pengguna.

Membuat useModalPengait

Untuk membuat useModalhook, kita akan menggunakan useStatehook dari React untuk mengelola status modal. Hook useStatemengembalikan array dengan dua item: nilai status saat ini dan fungsi untuk memperbarui nilai status.

Berikut kode untuk useModalhook:

import { useState } from 'react';

function useModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  function openModal(content) {
    setModalContent(content);
    setIsModalOpen(true);
  }

  function closeModal() {
    setModalContent(null);
    setIsModalOpen(false);
  }

  return {
    isModalOpen,
    openModal,
    closeModal,
    modalContent,
  };
}

• isModalOpen: boolean yang menunjukkan apakah modal saat ini terbuka.
• openModal: fungsi yang mengambil contentargumen dan menyetel statusnya modalContent, serta menyetel isModalOpenke true.
• closeModal: fungsi yang disetel modalContentke nulldan disetel isModalOpenke false.
• modalContent: konten modal.

Sekarang setelah kita memiliki useModalhook, kita dapat menggunakannya untuk membuat dan mengelola modal di komponen React kita.

Berikut adalah contoh komponen yang menggunakan useModalhook:

import { useState } from 'react';
import useModal from './useModal';

function App() {
  const [data, setData] = useState(null);
  const { isModalOpen, openModal, closeModal, modalContent } = useModal();

  function handleButtonClick() {
    setData('example data');
    openModal(<Modal onClose={closeModal} data={data} />);
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Open Modal</button>
      {isModalOpen && modalContent}
    </div>
  );
}

function Modal({ onClose, data }) {
  function handleConfirm() {
    console.log('Confirmed with data:', data);
    onClose();
  }

  return (
    <div>
      <h2>Modal Content</h2>
      <p>Data: {data}</p>
      <button onClick={onClose}>Cancel</button>
      <button onClick={handleConfirm}>Confirm</button>
    </div>
  );
}

Komponen `Modal menerima dua props: onClosedan data. onCloseadalah fungsi yang akan dipanggil saat pengguna mengklik tombol "Batal" atau tombol "Konfirmasi". dataadalah data yang diatur dalam handleButtonClickfungsi.

Komponen Modalmenampilkan konten jendela modal, termasuk data yang diteruskan sebagai penyangga. Ini juga termasuk tombol "Batal" dan tombol "Konfirmasi". Saat pengguna mengklik tombol "Batal", onClosefungsi dipanggil, yang akan menutup jendela modal. Saat pengguna mengklik tombol "Konfirmasi", handleConfirmfungsi tersebut dipanggil, yang mencatat data ke konsol dan kemudian memanggil onCloseuntuk menutup jendela modal.

Terakhir, dalam Appkomponen, kami merender tombol yang membuka modal saat diklik, dan merender modal secara kondisional dengan memeriksa apakah isModalOpenbenar dan merender modalContentdi DOM.

Kesimpulan

Dalam artikel ini, kami telah menunjukkan kepada Anda cara membuat useModalhook di React yang menyederhanakan pembuatan dan pengelolaan jendela modal. Dengan hook ini, Anda dapat dengan mudah membuka dan menutup modals, meneruskan data ke sana, dan menangani interaksi pengguna.

Pengait useModaldapat disesuaikan agar sesuai dengan kebutuhan spesifik Anda. Misalnya, Anda dapat menambahkan lebih banyak variabel status untuk melacak berbagai jenis modals atau menambahkan fungsi tambahan untuk menangani interaksi pengguna tertentu.

Dengan menggunakan useModalhook, Anda dapat membuat kode React Anda lebih bersih dan teratur, dan menghindari kerumitan dalam mengelola modal secara langsung di komponen Anda. Kami harap artikel ini bermanfaat, dan Anda akan menemukan pengait useModalberguna dalam proyek React Anda.