Featured image of post Patrones de Portal en React: Renderizado fuera del árbol padreFeatured image of post Patrones de Portal en React: Renderizado fuera del árbol padre

Patrones de Portal en React: Renderizado fuera del árbol padre

Explore advanced React portal patterns for modals, tooltips, and overlays including createPortal API, event bubbling, nested portals, and accessibility.

ReactDOM.createPortal renderiza un componente fuera del árbol DOM del padre, útil para modales, tooltips y dropdowns que necesitan evitar overflow: hidden o z-index del padre.

Uso básico

createPortal(children, domNode)

El portal se renderiza en domNode pero conserva el contexto React (props, estado, context API).

Casos de uso comunes

Modales, notificaciones toast, tooltips, menús contextuales, paneles laterales. Todos necesitan salir del flujo de layout del padre.

Accesibilidad

Los portales deben manejar el foco correctamente: atrapar foco dentro del modal, cerrar con Escape, restaurar foco al cerrar. Combinar con la Popover API nativa cuando sea posible.

SSR y Portales

Los portales solo funcionan en el cliente. En SSR, renderiza un placeholder o null, y en hidratación monta el portal.