Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP1stack specificStack: React
reactportaldomarchitecture
Place portal targets outside the problematic layout boundary
Place portals in a stable target outside the problematic layout boundary, with clear ownership; the target need not be outside the React root.
PR: hegnar-components · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codetsx
| 1 | return createPortal(modal, containerStillInsideClippingAncestor); |
Explanation (EN)
A portal into a still-clipped container does not solve the layout problem that motivated it.
Objašnjenje (HR)
Good example
New codetsx
| 1 | // web component creates two siblings: react root + portal root |
| 2 | shadowRoot.appendChild(reactRoot); |
| 3 | shadowRoot.appendChild(portalRoot); |
| 4 | createRoot(reactRoot).render(<App portalRoot={portalRoot} />); |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
Choose an existing stable portal target that escapes the actual clipping/stacking constraint and whose children have one clear owner.
Exceptions / Tradeoffs (EN)
A target inside the same React root can be valid. A sibling root is one integration pattern, not a requirement of createPortal. Check focus, events, styles and target lifetime.