Member-only story
React Portals. Lanzar un popup que pueda acceder al estado del componente
Los React Portals permiten crear componentes que accedan al estado del componente padre pese a estar montados sobre elementos del DOM fuera de la jerarquía
Para aquellos que no conozcáis los React Portals, esta API de React nos permite renderizar componentes hijos sobre elementos del DOM que se encuentren fuera de la jerarquía del elemento podre.
Tal y como apunta la documentación de React esto puede resultar muy útil en casos donde interactúen elementos que usan propiedades CSS como z-index
u overflow
, ya que los elementos hijos del DOM se ven restringidos por las definiciones de los padres. Gracias a los React Portals podremos renderizar en el DOM un componente fuera del padre y así conseguir saltarnos estas restricciones.
En el artículo de hoy quiero mostraros cómo podemos emplear los React Portals para crear popups mediante la instrucción window.open
que puedan acceder al estado del componente padre tal y cómo por ejemplo hacen las típicas ventanas de chat de GMail.
¡Vamos allá!