Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
React event bubbling बनाए रखते हुए parent DOM से बाहर children render करना।
ReactDOM.createPortal(children, domNode) एक React subtree को उस DOM node में render करता है जो parent के render होने वाले node से अलग होता है। भले ही component DOM में किसी अलग जगह दिखे (जैसे body स्तर पर एक modal), वह React component tree में child बना रहता है। इसका अर्थ है कि context, events और React lifecycle ठीक वैसे ही काम करते हैं जैसे portal inline हो।
createPortal(children, document.getElementById('modal-root')) React को बताता है कि children को parent के DOM subtree की बजाय #modal-root में render करें। DOM output, parent के DOM से पूरी तरह अलग होता है।
DOM में कहीं और render होने के बावजूद, portal component conceptually उस component का child है जो इसे render करता है। इसे वही context values, वही React props मिलते हैं और यह उसी fiber tree में भाग लेता है।
यदि आप portal के अंदर click करते हैं, तो click event React के component tree में parent तक bubble होती है — भले ही DOM में, portal का node parent के DOM subtree से बाहर हो। React का synthetic event system fiber tree पर काम करता है, DOM tree पर नहीं।
एक portal component, React के component tree में ancestor Provider से context values पढ़ सकता है, भले ही portal किसी पूरी तरह अलग DOM node में render हो।
ReactDOM.createPortal(children, domNode)। React children को parent के DOM container की बजाय domNode में render करता है।
दो अलग-अलग hierarchies। React tree, context, events और props को नियंत्रित करता है। DOM tree, visual layout और CSS inheritance को नियंत्रित करता है।
Portal events, React component tree (DOM tree नहीं) से bubble होती हैं, इसलिए parent components को portal children के events मिलते हैं।
Portal का सबसे सामान्य उपयोग: modals और tooltips को document.body पर render करना ताकि ancestor elements के overflow:hidden या z-index clipping से बचा जा सके।
1import { createPortal } from 'react-dom';23function Modal({ isOpen, onClose, children }) {4 if (!isOpen) return null;56 // Renders into document.body, not into parent's DOM node7 return createPortal(8 <div className="modal-overlay" onClick={onClose}>9 <div className="modal-content" onClick={e => e.stopPropagation()}>10 {children}11 </div>12 </div>,13 document.body // the target DOM node14 );15}1617// Usage — modal is a React child of Card,18// but renders at document.body in the DOM19function Card() {20 const [open, setOpen] = useState(false);21 return (22 <div style={{ overflow: 'hidden' }}> {/* won't clip modal */}23 <button onClick={() => setOpen(true)}>Open Modal</button>24 <Modal isOpen={open} onClose={() => setOpen(false)}>25 Content here!26 </Modal>27 </div>28 );29}
Portals एक मूलभूत CSS समस्या हल करते हैं: modals, tooltips और dropdowns को visually अपने parent containers से 'बाहर निकलना' होता है। overflow:hidden, z-index stacking contexts और transform properties जैसे ancestor CSS, absolutely-positioned children को clip या reposition कर सकते हैं। document.body पर render करके, portals इन सभी constraints को दरकिनार करते हैं और साथ ही React के component model को बनाए रखते हैं।
Your card component has `overflow: hidden` to clip long text. When you add a dropdown menu or modal inside the card, it gets clipped by the card's overflow — users can't see the full dropdown.
The modal/dropdown is a DOM child of the card, so CSS `overflow: hidden` on the card clips everything inside it. You could remove overflow:hidden but that breaks the text truncation. CSS `z-index` alone can't escape an overflow context.
Use a portal to render the modal at `document.body`. It escapes the card's CSS stacking context entirely. React events still bubble through the React tree (card → modal), so onClick handlers and context providers work normally — only the DOM position changes.
Takeaway: Portals decouple the DOM hierarchy from the React component hierarchy. This is essential for any UI that needs to visually 'break out' of its container: modals, tooltips, dropdowns, toast notifications, and floating menus.
You're building a micro-frontend where your React widget needs to render inside a specific container managed by a host application (not your root div). The host gives you a `#widget-container` div.
Your React app renders into `#app-root` by default. You can't simply move your component tree because it needs to share context and state with other parts of your React app.
Use portals to render specific components into `#widget-container` while keeping them in the same React tree. They still receive context from their React parent, participate in event bubbling, and share state — they just render into a different DOM node.
Takeaway: Portals are the foundation for micro-frontend integration patterns. They let you mount React components into external DOM nodes while preserving the full React component model (context, error boundaries, event delegation).