¿Cómo crear un cuadro emergente en ReactJS?

En este artículo, vamos a aprender cómo podemos crear una ventana emergente en ReactJs. Una ventana emergente es un área de visualización de la interfaz gráfica de usuario, generalmente una pequeña ventana, que aparece repentinamente en el primer plano de la interfaz visual.

React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para crear nuestra ventana emergente, usaremos el paquete reactjs-popup porque es potente, liviano y totalmente personalizable. Después de eso, agregaremos nuestra ventana emergente en nuestra página de inicio con un botón para activar la ventana emergente usando el paquete instalado.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete reactjs-popup usando el siguiente comando:

npm i reactjs-popup

Estructura del proyecto: Se verá así.

Agregar ventana emergente: en este ejemplo, vamos a agregar la ventana emergente en la página de inicio de nuestra aplicación usando el paquete que instalamos. Para ello, agregue el siguiente contenido en el archivo App.js.

import React from 'react';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
  
export default function PopupGfg(){
  return(
  <div>
    <h4>Popup - GeeksforGeeks</h4>
    <Popup trigger={<button> Click to open popup </button>} 
     position="right center">
      <div>GeeksforGeeks</div>
      <button>Click here</button>
    </Popup>
  </div>
  )
};

Explicación: en el ejemplo anterior primero, estamos importando el componente Popup del paquete react-popup. Después de eso, estamos usando nuestro componente emergente para agregar una ventana emergente con un botón para activar la ventana emergente.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: