Hace poco tuve la oportunidad de ver como se empleaba los portales en React y me pareció una técnica bastante interesante ya que nos permite manejar de forma nativa, componentes en un nodo del DOM que viven fuera de la jerarquía del padre.
Viéndolo de otro modo, los React Portals son una especie de API que nos permite renderizar componentes saltándonos la ya conocida jerarquía del DOM.
Al comienzo uno puede pensar ´¿para qué demonios quiero romper la jerarquía del DOM?´, pues según la documentación oficial, los React Portals encajan bastante bien cuando queremos manejar un componente cuyo padre tiene estilos diferentes como un z-index o un overflow:hidden y queremos saltarnos esto. Por ejemplo, una ventana de chat, un tooltip, entre otros.
Creando un portal con React
Pues para comenzar, lo primero que se necesita es añadir la etiqueta en nuestro archivo index.html
<body>
<div id='root'></div>
<div id='myModal'></div>
</body>
Como podemos observar, el elemento myModal se encuentra al mismo nivel que el elemento root. Lo genial de los portales es que nos permitirá renderizar nuestro componente, saltándonos la jerarquía del DOM.
Como siguiente paso tenemos que crear nuestro archivo para el componente Modal
import React from 'react';
import ReactDOM from "react-dom";
import "./Modal.css";
const myModalContainer = document.querySelector("#myModal");
const Modal = ({ title, children, isOpened, closeModal }) => {
return (
isOpened &&
ReactDOM.createPortal(
<div className="modal">
<div className="modal-title">{title}</div>
<button onClick={closeModal}>X</button>
<div className="modal-body">{children}</div>
</div>,
myModalContainer
)
);
};
export default Modal;
Como podemos ver en el ejemplo, ReactDOM.createPortal recibe dos argumentos, lo primero es la estructura a renderizar y luego el elemento donde queremos que aparezca.
Una vez hecho esto, solo queda añadir el paso final en nuestro componente que activará el modal, en este caso useremos App.js.
import { useState } from "react";
import Modal from "./Modal";
import "./styles.css";
export default function App() {
const [isOpened, setIsOpened] = useState(false);
const handleOpenModal = () => setIsOpened(true);
const handleCloseModal = () => setIsOpened(false);
return (
<div className="App">
<h1>Hello I'm Gabriel and I'm using React Portals</h1>
<button onClick={handleOpenModal}>Open Modal</button>
<Modal title="Success" isOpened={isOpened} closeModal={handleCloseModal}>
This is my modal content
</Modal>
</div>
);
}
De esta forma lograremos renderizar nuestro modal, a este ejemplo falto agregarle estilos 😁
Top comments (0)