Popup

En ocasiones es necesario ampliar la información sobre un tema expuesto en una diapositiva o página, o mostrar con detalle una imagen asociada al tema en cuestión. Para tales casos, es común usar las llamadas ventanas modales.

Las ventanas modales son activadas cuando el usuario hace clic sobre algún elemento en particular de la interfaz de usuario. Cuando son bien usadas, previenen a los usuarios de errores y facilitan acciones al permitir realizarlas sin salir de la página.

<Popup> es un componente que permite activar ventanas modales en nuestros contenidos digitales. Este componente fue desarrollado siguiente el principio de “Componente Universal“, es decir, no se crea una instancia del componente cuando se desea utilizar, y en vez de eso, se llama la función pública open del objeto Popup. Veamos un ejemplo:

Para hacer la implementación de este componente, se instancia, de manera universal, una única etiqueta <Popup />; esta etiqueta se encarga de encolar las diferentes ventanas modales que se pueda llamar a través del método open. Veamos un ejemplo de implementación de este componente:

import React from 'react';
import { render } from 'react-dom';
import { Popup } from 'unc-react-creator';

import './assets/css/default.styl';
import './assets/css/C02.styl';
import 'animate.css/animate.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  const handleClick = () => {
    Popup.open({
      title: 'Ventana Modal',
      content: (
        <div>
          Este es el contenido de la ventana modal, haz clic en el siguiente
          botón para abrir otra ventana:
          <button className='btn-blue' onClick={() => {
            Popup.open('Segundo ventana, la primera se oculta hasta cerrar ésta')
          }}>
            Abrir otra ventana sin título
          </button>
        </div>
      ),
      height: '100%',
      width: '100%'
    });
  };

  return (
    <div className='d-flex align-items-center justify-content-center h-100'>
      <Popup />
      <button className='btn-blue' onClick={handleClick}>Abrir ventana</button>
    </div>
  );
};

render(
  <App />,
  document.getElementById('app')
);