¿Qué son los React Portals?

Clase 24 de 34 • Curso de React.js

Contenido del curso

Introducción y requisitos

1
¿Qué necesitas para aprender React.js?
06:35 min

Maquetación con React.js

Interacción con React.js

Librería de Iconos Personalizados

Herramientas avanzadas: escalabilidad, organización y persistencia

Deploy

Próximos pasos: React #UnderTheHood

Bonus: creando proyectos en React desde cero

Tomar examen

Resumen

¿Qué son los React Portals y cómo funcionan?

React Portals es una poderosa herramienta que ofrece React para mover componentes entre diferentes nodos de HTML, casi como si de magia se tratara. Imagina que tienes un componente que deseas renderizar en un lugar completamente distinto, fuera del flujo DOM principal de tu aplicación. Los Portals te permiten hacer justamente eso: teletransportar componentes entre nodos, manteniendo la estructura del componente principal. Esto resulta especialmente útil cuando se maneja contenido dinámico como modales o tooltips, donde el UI necesita aparecer fuera del contenedor principal.

¿Cómo se implementan los Portals en un proyecto React?

Para implementar Portals en un proyecto React primero se debe crear un nodo HTML adicional en el archivo index.html. Este nodo será el destino al que se teletransportará el contenido del componente. La implementación típica requiere las siguientes acciones:

Crear el nodo en HTML: Añadir un div con un ID único al archivo index.html. Por ejemplo <div id="modal"></div>.
Uso de react-dom.createPortal: Dentro del componente, usar react-dom.createPortal para definir qué contenido será teletransportado y a qué nodo HTML.

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal')
  );
}

¿Cómo controlar la visibilidad de un modal con estado?

Para controlar cuándo un modal debe estar visible se puede usar un estado en React, por ejemplo openModal. El modal solo debe renderizarse cuando este estado sea true. Se puede lograr lo siguiente:

Crear un estado openModal:

const [openModal, setOpenModal] = React.useState(false);

Renderizar condicionalmente el modal:

{openModal && <Modal>Contenido del modal</Modal>}

Usar un botón o evento para alternar el estado openModal:

<button onClick={() => setOpenModal(!openModal)}>Toggle Modal</button>

¿Cómo hacer el estilo del modal más atractivo?

Un modal bien diseñado puede mejorar significativamente la experiencia del usuario. Aquí algunas sugerencias para estilizar un modal usando CSS:

Cobertura completa: Hacer que el modal abarque toda la pantalla usando CSS con position: fixed, top: 0, left: 0, width: 100% y height: 100%.
Fondo translúcido: Usar un color de fondo con transparencia para resaltar el contenido del modal y crear un efecto de desenfoque del fondo.
Centro del contenido: Centrar el contenido del modal vertical y horizontalmente para mejor accesibilidad usando flexbox.

Ejemplo de CSS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

Conclusión

Implementar Portals en React para crear modales y otros componentes de UI dinámicos es una táctica beneficiosa que maneja eficientemente la renderización de componentes fuera del DOM principal. Usar estados para controlar la visibilidad y CSS para el estilo asegura que estos elementos no solo funcionen bien, sino que también se vean bien. Anímate a utilizar estos conceptos en tu próximo proyecto, ¡transforma y mejora la experiencia de tus usuarios!

Comentarios

Carolina Danae Rodríguez Jiménez

student•

No me funcionaba el ReactDOM.createPortal, buscando en la documentación de React me indicaba que se escribe diferente, cabe aclarar que es la versión 18:

Brayan Mercado Sanmartin

student•

prueba en arrow porque en mi inocencia la veo bien const Modal = ({childre}) =>{ return createPortal( el código como lo tienes al interior de createporta ); };

Agustin Mariano Bilbao

student•

Me estaba sucediendo que al ponerle el valor 'true', desaparecía todo el contenido. Lo pude solucionar escribiendolo de esta menra. Gracias

Caleb González Flores

student•

Esa técnica con las manos para abrir portales me parece conocida! 🤣

Omnicanal Jamar

student•

jejejej dr stange

Bryan Enrique Garay Benavidez

student•

¿Para qué sirven los portales? Los portales nos permiten ubicar un componente hijo dentro del conjunto de componentes que se renderizan en el nodo html principal del DOM, generalmente el id = “root”, pero hacer que aparezcan en un **nodo **fuera de la jerarquía del DOM. Esto permite una mayor facilidad a la hora de maquetar y estilizar componentes que aparecen y desaparecen en el renderizado de nuestra página como los modales (ventanas). Gracias a los portales, por ejemplo, podemos ubicar a nuestro componente <Modal> luego del conjunto de componentes que tenemos en la AppUI como <TodoCounter/>, <TodoSearch/> o <CreateTodoButton/>, pero el renderizado se hará en el div del nodo html que nosotros indiquemos, osea fuera del “root”. Esto trae como ventaja por ejemplo poder estilizar fácilmente el modal para que aparezca por encima del resto de componentes.

Randy Ochoa

student•

Lo que hice para abrir y cerrar el Modal fue pasarle el contexto al componenete createTodoButton y al hacerle click que cambie su estado de false a true y a la inversa:

function CreateTodoButton() {
    const {
        setOpenModal,
        openModal,
    } = React.useContext(TodoContext)

    return (
        <button
            className={"newTodo"}
            onClick={() => {setOpenModal(!openModal)}} 
        >
        <FaPlus 
            className="icon"
        />
        </button>
    );
}

Max Andy Diaz Neyra

student•

Otra forma de hacerlo:

function CreateTodoButton() {

  const { setOpenModal } = useContext(TodoContext);

  return (
    <button
      className="CreateTodoButton"
      onClick={
        (event) => {
          setOpenModal((value)=>!value)
        }
      }
    >+</button>
  );
}

export { CreateTodoButton };

Alejandro Calderón

student•

Genial! :D

Ricardo Alfonso Chavez Vilcapoma

student•

Mi solución fue un if en el componente de button usando el contexto.

Nestor Rios Garcia

student•

ahi te conviene mucho usar el condicional ternario

Camilo Andrés Granda Cortés

student•

Según lo que entendí, es así.

Geovanni Labastida Vázquez

student•

Aquí esta la documentación más reciente de la API del DOM createPortal.

React DOM API : createPortal - React Docs

Cristian Acalo

student•

✨🦄Mi modal quedó así:

Usé el el setOpenModal para poder abrirlo y cerrarlo c:

Cristian Contreras

student•

createPortal recibe 3 parametros:

Children: cualquier cosa que pueda ser renderizada con react.
domNode: nodo(s)
(opcional) Key: un string o número único que para ser usado como portal

Remix Zapata

student•

Se siente mucho más ordenado usando useContext, ¡gran clase JuanDC!

Edgar Oliveros

student•

Hola! Tengo una pregunta, la mejor forma de trabajar con APIS seria con contexto? es decir, traer toda la info de la API y luego consumirla en cada lugar que necesite?

Marcelo Vinicio Chavarría Ugalde

student•

Exactamente, eso sería lo mejor. Así lo la llamas a cada rato sino solo una vez y distribuyes. 😁

Gustavo Parra

student•

Aquí tienen esta página por si les interesa no tener que hacer un modal desde el principio, sino usar los que ofrece bootstrap https://react-bootstrap.netlify.app/docs/components/modal/.

Nicolás Felipe Pinto Vega

student•

Asi me quedó la ventana modal:

Raycris Maldonado

student•

Reto del modal

Seria algo asi, si se finjan tego declarado mi useState en false como dijo el profesor porque quiero que mi modal desde el principio este cerrado, luego en mi etiqueta de button, con el manejador de onClick hago que el estado cambie a true y como la condicion abajo dice cada vez que openModal sea verdadero muestrame ese componente. Cabe resaltar que en mi componente de modal tengo un boton llamado closeModal el cual cuando quiero cerrar el modal lo actualizo a false y este completa la accion.

const [openModal, setOpenModal] = useState(false);
<button className={styles.btn} onClick={() => setOpenModal(true)}>
	<div></div>
        <div></div>
        <div></div>
</button>
{openModal ? <Modal closeModal={() => setOpenModal(false)} />

Alexander Flores Rayme

student•

Te recomiendo usar !openModal para tener la funcionalidad de abri y cerrar y no solo de abrir con el True:

<CreateTodoButton onClick={() => setOpenModal(!openModal)} />

Cristian Contreras

student•

Les comparto la documentación: createPortal

Santiago Rodriguez Palacio

student•

Otra manera de hacerlo es con la importación directa de createPortal sin utilizar ReactDOM

import React from 'react'
import { createPortal } from 'react-dom'
export const ModalMessage = ( {children}) => {
  return (
    createPortal(
      <div>
        {children}
      </div>,
      document.body
    )
  )
}

Enzo Ulloa

student•

cual es la diferencia con el otro nodo que tiene el root? Y que utilidad tiene esto, porque querría crear el modal en otro nodo en vez de agregarlo a la misma app?

Juan Castro

teacher•

El uso más "obvio" es para crear modales. Pero más allá de eso puede pasar que tengas React en una parte de la aplicación, pero no en toda la aplicación. Esto puede pasar si apenas estás migrando a React, pero la aplicación sigue teniendo secciones con alguna otra tecnología. Gracias a los portales puedes acceder a esos nodos donde originalmente no había conexión con React.

Shelley Valdés Herrera

student•

En React 18, las funciones como createPortal aún se exportan desde react-dom, pero debes importarlas directamente en lugar de acceder a ellas a través de un objeto ReactDOM importado.

Si estás utilizando React 18, deberías importar createPortal directamente de react-dom así:

import React from "react";

import { createPortal } from "react-dom"; // Importación directa de createPortal

function Modal({children}) {

return createPortal(

<div className="Modal">

{children}

</div>,

document.getElementById('modal')

);

}

export { Modal };

Cortesía de ChatGPT

Alejandro Padron

student•

No me renderizaba el portal en la consola, para esto realicé la importacion de createPortal de esta manera:

import React from "react";
import { createPortal } from "react-dom";

function Modal({ children }) {
    return createPortal(
        <div className="Modal">
            {children}
        </div>,
        document.getElementById('modal')
    );
}

export { Modal };

Por otra parte para que abrir y cerrar el portal con el createButton hice el siguiente codigo:

import React from 'react';
import './CreatTodoButton.css';
import { TodoContext } from '../TodoContext';


function CreateTodoButton() {
    const {
        openModal,
        setOpenModal,
      } = React.useContext(TodoContext);

    return(
        <button 
        className="CreateTodoButton" 
        onClick={
            (e) =>
                {setOpenModal(!openModal)}
        }>+</button>
    )
};

Carlos Esteban León Pinilla

student•

No sabia de esta funcionalidad, genial genial!

function CreateTodoButton() {
    const {
        setOpenModal,
        openModal,
    } = React.useContext(TodoContext)

    return (
        <button
            className={"newTodo"}
            onClick={() => {setOpenModal(!openModal)}} 
        >
        <FaPlus 
            className="icon"
        />
        </button>
    );
}

function CreateTodoButton() {

  const { setOpenModal } = useContext(TodoContext);

  return (
    <button
      className="CreateTodoButton"
      onClick={
        (event) => {
          setOpenModal((value)=>!value)
        }
      }
    >+</button>
  );
}

export { CreateTodoButton };

const [openModal, setOpenModal] = useState(false);
<button className={styles.btn} onClick={() => setOpenModal(true)}>
	<div></div>
        <div></div>
        <div></div>
</button>
{openModal ? <Modal closeModal={() => setOpenModal(false)} />

import React from 'react'
import { createPortal } from 'react-dom'
export const ModalMessage = ( {children}) => {
  return (
    createPortal(
      <div>
        {children}
      </div>,
      document.body
    )
  )
}

import React from "react";
import { createPortal } from "react-dom";

function Modal({ children }) {
    return createPortal(
        <div className="Modal">
            {children}
        </div>,
        document.getElementById('modal')
    );
}

export { Modal };

import React from 'react';
import './CreatTodoButton.css';
import { TodoContext } from '../TodoContext';


function CreateTodoButton() {
    const {
        openModal,
        setOpenModal,
      } = React.useContext(TodoContext);

    return(
        <button 
        className="CreateTodoButton" 
        onClick={
            (e) =>
                {setOpenModal(!openModal)}
        }>+</button>
    )
};

¿Qué son los React Portals?

Introducción y requisitos

¿Qué necesitas para aprender React.js?

Maquetación con React.js

¿Qué es un componente?

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en React

Interacción con React.js

Eventos en React: onClick, onChange

¿Qué es el estado?

Contando TODOs

Buscando TODOs

Completando y eliminando TODOs

Librería de Iconos Personalizados

Iconos en React: librerías y SVG

Iconos con colores dinámicos

Herramientas avanzadas: escalabilidad, organización y persistencia

Local Storage con React.js

Custom Hooks

Organización de archivos y carpetas

Feature-First Directories en React

Tips para naming y abstracción de componentes React

¿Qué son los efectos en React?

Estados de carga y error

Actualizando estados desde useEffect

Reto: loading skeletons

¿Qué es React Context?

useContext