React Portals render children into a DOM node outside the parent component's hierarchy while maintaining React's event bubbling.
Basic Portal#
Loading code block...
Creating Portal Container#
Loading code block...
Modal Component#
Loading code block...
Tooltip Portal#
Loading code block...
Event Bubbling#
Loading code block...
Dropdown Portal#
Loading code block...
Focus Management#
Loading code block...
Context in Portals#
Loading code block...
Multiple Portal Layers#
Loading code block...
Best Practices#
When to Use Portals:
✓ Modals and dialogs
✓ Tooltips and popovers
✓ Dropdown menus
✓ Notifications/toasts
✓ Full-screen overlays
Accessibility:
✓ Use proper ARIA attributes
✓ Manage focus correctly
✓ Trap focus in modals
✓ Restore focus on close
Implementation:
✓ Clean up portal containers
✓ Handle scroll and resize
✓ Use z-index properly
✓ Consider keyboard navigation
Avoid:
✗ Overusing portals
✗ Breaking context unnecessarily
✗ Forgetting cleanup
✗ Ignoring accessibility
Conclusion#
React Portals enable rendering children outside the DOM hierarchy while preserving React's features like event bubbling and context. Use them for modals, tooltips, dropdowns, and any UI that needs to escape parent containers. Always manage focus properly, clean up portal containers, and maintain accessibility. Remember that events still bubble through the React component tree, not the DOM tree.