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.