Tutorial Membuat Komponen Modal Yang Dapat Digunakan Kembali Di React

Hari ini, saya akan membahas dan mendalami topik Modal Component, yang merupakan elemen UI yang umum digunakan yang dapat membantu meningkatkan pengalaman pengguna dengan memberikan informasi atau opsi tambahan tanpa harus membuka halaman baru. Kita akan membahas cara membuat komponen modal yang dapat digunakan kembali di React menggunakan hooks dan cara mengimplementasikan berbagai fitur seperti membuka dan menutup modal, meneruskan data ke modal, dan menangani interaksi pengguna di dalam modal. Baik Anda seorang pemula atau developer berpengalaman, saya harap postingan ini informatif dan bermanfaat bagi Anda. Jadi tanpa basa-basi lagi, mari kita mulai!

Modal.jsx

export const Modal = ({ shouldShow, onRequestClose, children }) => {
  return shouldShow ? (
    <div
      classname="fixed flex items-center justify-center z-[1] h-full w-full bg-black/40 overflow-auto"
      onClick={onRequestClose}
    >
      <div
        classname="w-3/4 p-5 bg-slate-300 rounded-lg"
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
        <button classname="text-xl" onClick={onRequestClose}>
          X
        </button>
        {children}
      </div>
    </div>
  ) : null;
};

Kode ini mengekspor komponen Modal di React. Komponen mengambil tiga props: shouldShow, onRequestClose, dan children.

Prop shouldShow menentukan apakah modal harus ditampilkan atau tidak. Jika benar, modal ditampilkan; jika salah, modal tidak ditampilkan.

Prop onRequestClose adalah fungsi callback yang dipanggil ketika pengguna mengklik di luar modal atau mengklik tombol tutup. Fungsi ini dapat digunakan untuk menangani pembersihan yang diperlukan atau tindakan tambahan saat modal ditutup.

Prop children digunakan untuk meneruskan konten yang akan ditampilkan dalam modal.

Komponen diimplementasikan menggunakan operator ternary untuk merender modal berdasarkan nilai shouldShow. Jika shouldShow benar, modal dirender sebagai elemen posisi tetap di tengah layar dengan latar belakang semi-transparan. Isi dari modal terkandung dalam elemen div yang ditata dengan lebar tertentu, dengan padding dan sudut membulat. Tombol tutup diimplementasikan sebagai karakter "X" sederhana yang memicu panggilan balik onRequestClose saat diklik.

Secara keseluruhan, komponen Modal ini adalah cara sederhana dan dapat digunakan kembali untuk menampilkan konten di window modal dalam aplikasi React.

Untuk penataan saya menggunakan Tailwindcss.

app.jsx

import { Modal } from "./Modal.jsx";
import React, { useState } from "react";

const app = () => {
  const [showModal, setshowModal] = useState(false);

  return (
    <div>
      <button
        classname="p-4"
        onClick={() => {
          setshowModal((prev) => !prev);
        }}
      >
        show modal
      </button>

      <Modal
        shouldShow={showModal}
        onRequestClose={() => {
          setshowModal((prev) => !prev);
        }}
      >
        <div>Your Modal</div>
      </Modal>
    </div>
  );
};

export default app;

Kode di atas adalah komponen React yang mengimpor dan menggunakan komponen Modal. Ini mendefinisikan showModal variabel status menggunakan hook useState dan menginisialisasinya menjadi false.

Komponen app merender tombol yang, saat diklik, mengubah nilai showModal dengan memanggil setshowModaldengan nilai sebelumnya dinegasikan.

Komponen Modal kemudian dirender secara kondisional berdasarkan nilai showModal.

Kesimpulan :

Salah satu kelemahan menggunakan package react-modal npm di atas komponen modal kustom adalah ia menambahkan ketergantungan tambahan pada proyek Anda, yang dapat meningkatkan ukuran proyek dan berpotensi memperlambat aplikasi Anda. Selain itu, react-modal mengharuskan Anda membungkus aplikasi dengan komponen ModalProvider, yang mungkin memerlukan pemfaktoran ulang basis kode yang ada. Di sisi lain, komponen modal kustom dapat disesuaikan dengan kebutuhan spesifik aplikasi Anda, tanpa persyaratan tambahan atau konfigurasi.

Tutorial Membuat Komponen Modal Yang Dapat Digunakan Kembali Di React

Kesimpulan :

Artikel Terkait Lainnya :