React Portals: Trik Jitu Keluar dari Kotak

Halo, Sobat Koding! 👋

Pernah gak sih kamu lagi asik bikin Modal atau Tooltip, eh pas diliat hasilnya malah kepotong? ✂️

Biasanya ini gara-gara parent container-nya punya overflow: hidden atau position: relative yang posesif banget. Udah coba naikin z-index sampe 999999 juga tetep gak ngaruh. Bikin frustrasi kan?

Tenang, jangan banting keyboard dulu. React punya fitur sakti buat ngatasin ini. Namanya React Portals.

Anggap aja ini kayak pintu kemana saja-nya Doraemon buat komponen kamu. 🚪

Masalahnya: Terjebak di DOM

Secara default, komponen React itu patuh banget. Kamu taruh dia di dalam div A, ya dia bakal ngerender HTML-nya di dalem div A.

// Parent Component
<div style={{ overflow: "hidden" }}>
  <Modal /> {/* Yah, kepotong deh... */}
</div>

Kalau parent-nya punya aturan CSS yang ketat, anak-anaknya (si Modal tadi) jadi korban. Dia gak bisa “terbang” bebas menuhin layar.

Kita butuh cara biar komponen ini tetep kita tulis di situ, tapi secara fisik dia muncul di tempat lain (misalnya nempel langsung di <body>).

Solusinya: createPortal

React udah nyediain fungsi khusus di react-dom, namanya createPortal.

Fungsi ini butuh dua hal:

Anaknya: Komponen (JSX) yang mau kamu render.
Wadahnya: Elemen DOM asli tempat kamu mau naruh si anak.

Cara Pakainya

Pertama, siapin dulu “pendaratan”-nya di HTML kamu. Biasanya kan ada <div id="root">. Kita tambah satu lagi.

<!-- index.html -->
<body>
  <div id="root"></div>
  <div id="modal-root"></div> <!-- Ini tempat pendaratannya -->
</body>

Terus, kita bikin komponen Modal-nya:

import ReactDOM from "react-dom";

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  // Kita cari elemen tujuannya di DOM asli
  const modalRoot = document.getElementById("modal-root");

  // Teleportasi!
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={onClose}>Tutup</button>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

Apa yang terjadi? Meskipun kamu panggil <Modal /> di dalem komponen yang “sempit”, HTML aslinya bakal disuntikkan ke dalem <div id="modal-root"> yang ada di luar sana. Bebas merdeka! 🎉

Event Bubbling: Fitur Ajaib

Ini bagian kerennya. Walaupun secara fisik (di DOM browser) si Modal ada jauh di luar, tapi secara logika React, dia tetep dianggap anak dari komponen yang memanggilnya.

Artinya? Event Bubbling tetep jalan!

const App = () => {
  const handleClick = () => {
    console.log("Klik ketangkep di App!");
  };

  return (
    <div onClick={handleClick}>
      <Modal isOpen={true}>
        <button>Klik Saya</button>
      </Modal>
    </div>
  );
};

Kalau kamu klik tombol di dalem Modal (yang fisiknya di modal-root), event onClick di App (yang fisiknya di root) bakal tetep jalan. React yang ngurus kabel-kabelnya buat kita. Canggih kan? ✨

Kapan Pake Portals?

Pake ginian kalau komponen kamu butuh “keluar” secara visual dari tempat asalnya:

Modals / Dialogs: Biar bisa full screen tanpa halangan.
Tooltips: Biar gak kepotong pinggiran kotak.
Dropdown Menus: Biar nongol di atas elemen lain dengan aman.
Loading Spinners: Yang nge-blok seluruh layar.

Penutup

React Portals itu senjata wajib buat Frontend Dev. Ini solusi paling bersih buat masalah layout z-index atau overflow yang sering bikin sakit kepala.

Inget rumusnya:

Import createPortal dari react-dom.
Target elemen DOM di luar root aplikasi.
Nikmati hidup tanpa drama CSS clipping.

Selamat mencoba dan Happy Coding! 🚀