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 maintain karte hue parent DOM se bahar children render karna.
ReactDOM.createPortal(children, domNode) ek React subtree ko ek alag DOM node mein render karta hai, na ki wahan jahan parent render hota hai. Jab component DOM mein alag jagah dikhta hai (jaise body level par ek modal), woh React component tree mein child hi rehta hai. Iska matlab hai ki context, events, aur React lifecycle bilkul waise kaam karte hain jaise portal inline ho.
createPortal(children, document.getElementById('modal-root')) React ko batata hai ki children ko parent ke DOM subtree ki jagah #modal-root mein render karo. DOM output parent ke DOM se bilkul alag hota hai.
DOM mein alag jagah render hone ke bawajood, portal component conceptually us component ka child hota hai jo ise render karta hai. Use wahi context values milte hain, wahi React props milte hain, aur woh usi fiber tree ka hissa hota hai.
Agar aap portal ke andar click karte hain, toh click event React ke component tree se parent tak bubble karta hai â chahe DOM mein portal ka node parent ke DOM subtree se bahar ho. React ka synthetic event system fiber tree par operate karta hai, DOM tree par nahi.
Ek portal component un context values ko read kar sakta hai jo React ke component tree mein ek ancestor Provider se aa rahi hain, chahe portal ek bilkul alag DOM node mein render ho.
ReactDOM.createPortal(children, domNode). React children ko parent ke DOM container ki jagah domNode mein render karta hai.
Do alag hierarchies. React tree context, events aur props govern karta hai. DOM tree visual layout aur CSS inheritance govern karta hai.
Portal events React component tree se bubble karte hain (DOM tree se nahi), isliye parent components portal children se events receive karte hain.
Sabse common portal use case: modals aur tooltips ko document.body par render karo taaki ancestor elements ke overflow:hidden ya z-index clipping se bacha ja sake.
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 ek fundamental CSS problem solve karte hain: modals, tooltips, aur dropdowns ko visually apne parent containers se 'bahar nikalna' hota hai. Ancestor CSS jaise overflow:hidden, z-index stacking contexts, aur transform properties absolutely-positioned children ko clip ya reposition kar sakti hain. document.body par render karke, portals in sab constraints se bach jaate hain aur React ka component model preserve rehta hai.
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).