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.