React Portals
ReactDOM.createPortal(children, domNode), EK, COMPONENT, KO, USKE, PARENT, DOM, HIERARCHY, KE, BAAHAR, KISI, DUSRE, DOM, NODE, MEIN, RENDER, KARNE, DETA, hai — REACT, COMPONENT, TREE, (CONTEXT, EVENT, BUBBLING) MEIN, WOH, PHIR, BHI, "LOGICALLY" PARENT, KA, CHILD, HI, REHTA, hai.
Modals, Tooltips, Dropdowns, JAISE, UI, ELEMENTS, KE, LIYE, PORTALS, USEFUL, HAIN — YE, ELEMENTS, KO, PARENT, KE, CSS, (overflow: hidden, z-index) KE, "TRAP" SE, BACHATE, HAIN, VISUALLY, BODY, KE, DIRECT, CHILD, KI, TARAH, RENDER, KARKE.
function Modal({ children }) {
return ReactDOM.createPortal(
<div className="modal-overlay">{children}</div>,
document.getElementById("modal-root") // DOM mein, ALAG, jagah
);
}
// index.html mein:
// <div id="root"></div>
// <div id="modal-root"></div>
// Modal, LOGICALLY, EK, DEEP, nested, component, ka, child, hai,
// LEKIN, VISUALLY, #modal-root, mein, render, hota hai (poori, screen, cover, kar, sakta hai)- createPortal() = component, ko, parent, DOM, hierarchy, ke, BAAHAR, render, karta hai
- React, tree, mein, LOGICALLY, phir, bhi, PARENT, ka, child, hai (context/events)
- Modals/Tooltips/Dropdowns = CSS, "trap" (overflow/z-index), SE, BACHNE, ke, liye
Portal, KE, ANDAR, KA, CLICK, EVENT, DOM, TREE, MEIN, (JAHA, PORTAL, ACTUALLY, RENDER, HOTA, hai) BUBBLE, NAHI, KARTA — REACT, TREE, MEIN, (JAHA, COMPONENT, LOGICALLY, DEFINED, hai) BUBBLE, KARTA, hai. YE, EK, IMPORTANT, DISTINCTION, hai, DEBUGGING, KE, LIYE.
Tooltips, KO, PARENT, COMPONENT, KE, overflow: hidden, YA, LOW, z-index, SE, CLIP, HONE, SE, BACHANE, KE, LIYE, PORTAL, MEIN, RENDER, KIYA, JAATA, hai — VISUALLY, BODY, KE, DIRECT, CHILD, KI, TARAH, POSITION, KIYA, JAATA, hai (ABSOLUTE/FIXED, POSITIONING, SE).
function Tooltip({ text, targetRect }) {
return ReactDOM.createPortal(
<div style={{ position: "fixed", top: targetRect.top, left: targetRect.left }}>
{text}
</div>,
document.body
);
}