DEV Community

Cover image for 🚀Creando portales con React🚀
GabrielOmar
GabrielOmar

Posted on

🚀Creando portales con React🚀

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>
Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

De esta forma lograremos renderizar nuestro modal, a este ejemplo falto agregarle estilos 😁

image

Top comments (0)