Crear un popup o ventana modal con JSX y React

Uno de los elementos más comunes con el que suelo trabajar como desarrollador web freelance son los popup o ventanas emergentes. Su versatilidad para mostrar elementos en un momento concreto de la navegación lo hace muy útil para una comunicación directa al usuario.

Antes de proseguir me gustaría hacer un inciso para avisar que si bien un popup y una ventana modal no son exactamente lo mismo, comúnmente suelen tratarse como si lo fuera. Por este motivo voy a referirme de manera indistinta a ellos, ya que el objetivo de este artículo es mostrar cómo se crea un componente de este tipo y puede ser aplicable para ambos casos.

En entorno web hay diferentes modos de crear un popup, pero en este ejemplo veremos cómo hacerlo con React y JSX de una de las múltiples maneras posibles. Para ello lo primero que tenemos que hacer es añadir React y ReactDOM a nuestro proyecto si aún no lo hemos hecho. Lo siguiente será crear un elemento HTML en cuyo interior renderizaremos la ventana emergente.

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="ruta/mi-popup.js"></script>
<div id="contenedor-popup"></div>

Aquí puedes ver que he añadido React a modo de ejemplo como scripts e iría en el head, pero puedes usar el modo que mejor te venga. A su vez he enlazado también al archivo de JavaScript (mi-popup.js) que contendrá el código de la ventana modal.

En este punto ya podemos pasar a programar dentro de nuestro archivo. Para ello utilizaré un componente funcional y el estado local de React que permitirá controlar la visibilidad del popup. También se veremos cómo abrir y cerrar el popup mediante eventos.

// Extraer las funciones necesarias de React
const { useState } = React;
const { render } = ReactDOM;

// Definir el componente PopupExample
const PopupExample = () => {
  // Estado para controlar la visibilidad del popup
  const [isPopupOpen, setPopupOpen] = useState(false);

  // Función para abrir el popup
  const openPopup = () => {
    setPopupOpen(true);
  };

  // Función para cerrar el popup
  const closePopup = () => {
    setPopupOpen(false);
  };

  // Retornar la estructura JSX del componente
  return (
    <div>
      {/* Botón para abrir el popup */}
      <button onClick={openPopup}>Abrir Popup</button>
      {/* Popup: se muestra si isPopupOpen es true */}
      {isPopupOpen && (
        <div className="ventana-popup">
          <div className="contenido-popup">
            <p>Contenido del popup</p>
            <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/React.svg/250px-React.svg.png" /></p>
            {/* Botón para cerrar el popup */}
            <button onClick={closePopup}>Cerrar</button>
          </div>
        </div>
      )}
    </div>
  );
};

// Renderizar el componente en el elemento con el id "root"
render(<PopupExample />, document.getElementById('contenedor-popup'));

Utilizamos el estado local (isPopupOpen y las funciones openPopup y closePopup) para controlar la visibilidad del popup o modal. El botón «Abrir popup» activa la función openPopup, que establece isPopupOpen en true. Cuando isPopupOpen es true, el componente del popup se renderiza en la interfaz de usuario. El botón «Cerrar» en el popup activa la función closePopup, que establece isPopupOpen en false, ocultando así el popup.

See the Pen Popup con JSX y React by Jesús Tovar (@jesustovar) on CodePen.

Este es un ejemplo básico, por lo que a partir de aquí lo ideal es que personalices el popup o modal según tus necesidades específicas, ya sea con modificaciones concretas del script o añadiendo estilos.

Por último ten en cuenta que aunque los navegadores más modernos interpretan JSX sin problemas, es posible te topes con alguno que no y en se caso necesitarás un compilador como Babel.

---

Referencias:

• Inicio rápido – Documentación oficial de React