React Portals render components outside their parent DOM hierarchy. Here's how to use them for modals, tooltips, and overlays.
Basic Portal
Loading code block...
Modal Component
Loading code block...
Tooltip Component
Loading code block...
Dropdown Menu
Loading code block...
Toast Notifications
Loading code block...
Best Practices
Accessibility:
✓ Manage focus properly
✓ Trap focus in modals
✓ Use proper ARIA attributes
✓ Support keyboard navigation
UX:
✓ Close on Escape key
✓ Close on click outside
✓ Prevent body scroll for modals
✓ Show/hide animations
Performance:
✓ Lazy render portal content
✓ Clean up event listeners
✓ Avoid unnecessary re-renders
✓ Use refs for DOM measurements
Conclusion
React Portals enable rendering content outside the parent DOM tree while maintaining React's event bubbling and context. Use them for modals, tooltips, dropdowns, and notifications. Always consider accessibility with proper focus management and keyboard support.