React Portals render children into a different DOM node while preserving React's component hierarchy. Here's how to use them.
Basic Portal#
Loading code block...
Portal Container Hook#
Loading code block...
Modal with Overlay#
Loading code block...
Tooltip Portal#
Loading code block...
Dropdown Portal#
Loading code block...
Toast Notifications#
Loading code block...
Focus Trap#
Loading code block...
Event Bubbling#
Loading code block...
SSR Considerations#
Loading code block...
Best Practices#
Use Cases:
✓ Modals and dialogs
✓ Tooltips and popovers
✓ Dropdown menus
✓ Toast notifications
Accessibility:
✓ Implement focus trapping
✓ Add ARIA attributes
✓ Handle keyboard navigation
✓ Manage focus on open/close
Styling:
✓ Use fixed positioning
✓ Handle z-index properly
✓ Consider scroll locking
✓ Position relative to trigger
Avoid:
✗ Overusing portals
✗ Breaking accessibility
✗ Memory leaks (cleanup)
✗ Ignoring SSR
Conclusion#
React Portals render content outside the DOM hierarchy while maintaining React context and event bubbling. Use them for modals, tooltips, dropdowns, and any UI that needs to break out of container overflow or z-index constraints. Always implement proper accessibility with focus management, keyboard handling, and ARIA attributes. Handle SSR by checking for document availability before rendering.