Frontend Academy · Pelajaran

Portal untuk Modal dan Tooltip

Gunakan ReactDOM.createPortal untuk merender anak komponen ke node DOM lain, sehingga modal dan tooltip dapat keluar dari kontainer overflow:hidden.

Portal untuk Modal dan Tooltip adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Masalah Pelepasan dari Kontainer

Modal dan tooltip perlu dirender di bagian atas DOM agar terlepas dari overflow:hidden, penumpukan z-index, dan konteks yang berakar pada transform milik induknya. Solusinya: portal.

API createPortal

createPortal(children, container) merender anak ke dalam kontainer (simpul DOM apa pun) sambil tetap menjadikannya anak logis dari komponen React untuk peristiwa dan konteks.

import { createPortal } from 'react-dom';

function Modal({ children, onClose }) {
  return createPortal(
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

Kontainer Portal

Target umum: document.body, div #modal-root khusus dalam index.html, atau kontainer yang dirujuk dengan ref dan dibuat sesuai kebutuhan.

<!-- index.html -->
<div id="root"></div>
<div id="modal-root"></div>

// component:
const modalRoot = document.getElementById('modal-root');
return createPortal(<div>...</div>, modalRoot);

Mengapa Tidak Merender Secara Langsung Saja?

Jika induk memiliki overflow: hidden, modal anak akan terpotong. Jika induk memiliki transform: scale, posisi tetap modal menjadi relatif terhadap induknya. Portal menghindari semua masalah ini.

Peristiwa Tetap Menggelembung

Meskipun dirender di tempat lain dalam DOM, peristiwa React menggelembung melalui pohon komponen, bukan pohon DOM. Klik di dalam portal tetap menggelembung ke handler onClick pada komponen React leluhur.

Menutup saat Overlay Diklik

Hentikan propagasi peristiwa pada konten modal agar klik di dalamnya tidak menutup modal.

function Modal({ onClose, children }) {
  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div className="content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

Menutup dengan Tombol Escape

Tambahkan pendengar keydown saat modal terbuka, lalu hapus saat komponen dilepas.

useEffect(() => {
  const onKey = (e) => { if (e.key === 'Escape') onClose(); };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, [onClose]);

Manajemen Fokus dalam Portal

Saat modal terbuka: pindahkan fokus ke dalamnya, tahan fokus di dalamnya hingga modal ditutup, lalu kembalikan fokus ke elemen yang membuka modal. Gunakan pustaka seperti focus-trap-react agar Anda tidak perlu menerapkan ulang logika ini.

Elemen dialog Bawaan

<dialog> milik HTML secara bawaan menangani posisi modal, latar belakang, penahanan fokus, dan penutupan dengan Escape. Untuk sebagian besar modal, ini merupakan titik awal yang lebih baik daripada portal.

function Modal({ open, onClose, children }) {
  const ref = useRef(null);
  useEffect(() => {
    if (open) ref.current?.showModal();
    else ref.current?.close();
  }, [open]);
  return (
    <dialog ref={ref} onClose={onClose}>
      {children}
    </dialog>
  );
}

Tooltip dan Popover

Tooltip diposisikan relatif terhadap elemen jangkar. Portal memungkinkannya terlepas dari konteks penumpukan. Gabungkan dengan floating-ui untuk mendeteksi benturan, membalik posisi, dan mengatur posisi.

import { useFloating, autoUpdate } from '@floating-ui/react';

function Tooltip({ children, content }) {
  const { refs, floatingStyles } = useFloating({ whileElementsMounted: autoUpdate });
  const [open, setOpen] = useState(false);
  return (
    <>
      <button ref={refs.setReference} onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
        {children}
      </button>
      {open && createPortal(
        <div ref={refs.setFloating} style={floatingStyles}>{content}</div>,
        document.body
      )}
    </>
  );
}

Keterbatasan SSR

document tidak tersedia di server. Render hanya di klien (periksa typeof window) atau gunakan dynamic milik Next.js dengan ssr:false.

Aksesibilitas: aria-modal

Kontainer modal sebaiknya memiliki role="dialog", aria-modal="true", dan aria-labelledby yang menunjuk ke heading modal. Atau gunakan <dialog> bawaan.

Pemeriksaan Singkat

Mengapa menggunakan createPortal untuk modal daripada merendernya secara langsung dalam pohon komponen?

Ringkasan: Portal

createPortal(children, container) merender DOM di tempat lain sambil mempertahankan pohon React secara logis. Ini mengatasi masalah pelepasan dari overflow, transform, dan z-index. Peristiwa tetap menggelembung melalui pohon React. Tambahkan penutupan dengan Escape dan manajemen fokus. <dialog> bawaan menangani sebagian besar hal ini untuk modal. Gabungkan dengan floating-ui untuk tooltip. Jangan lupakan SSR (pemeriksaan typeof window).

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Portal untuk Modal dan Tooltip” gratis?

Ya — teks lengkap “Portal untuk Modal dan Tooltip” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Portal untuk Modal dan Tooltip”?

Gunakan ReactDOM.createPortal untuk merender anak komponen ke node DOM lain, sehingga modal dan tooltip dapat keluar dari kontainer overflow:hidden. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Portal untuk Modal dan Tooltip” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy