Crear modales en React es fundamental para mantener a los usuarios en el sitio web y facilitar conversiones. Estos elementos permiten mostrar información relevante o capturar formularios sin necesidad de redirigir a los visitantes a otras páginas, lo que mejora la experiencia del usuario.
Además React ofrece la ventaja de crear componentes reutilizables, lo que simplifica el proceso de integración y gestión de estos modales en la aplicación. Así, los modales se convierten en herramientas eficaces para interactuar con los usuarios y optimizar la funcionalidad del sitio.
Contenido
Lo que vas a necesitar
- Repositorio: aquí encontrarás el link al repostiorio.
1. Instalar react boostrap
Cómo crear modal react: paso a paso
Crear modales en React es fundamental para mantener a los usuarios en el sitio web y facilitar conve…
Inspeccionar desde móvil IOS o Android: chrome y safari
Hacer pruebas en nuestro proyecto o desarrollo web es clave para llevarlo acabo correctamente y para…
Cómo implementar Sepolia: Red de prueba de Ethereum
Antes de implementar un contrato en una red de mainnet como Ethereum debemos primero saber cómo impl…
Comienza instalando React Bootstrap en tu proyecto. Abre la terminal en la carpeta del frontend y ejecuta el siguiente comando:
sudo npm install react-bootstrapCrear componente principal y componente del modal
Este paso es importante porque debemos tener 2 componentes independientes: uno donde vive el modal y otro donde vamos a importar para hacer las pruebas. Simplemente crea 2 archivos jsx, uno llamado modal.jsx y el otro por ejemplo home.jsx.
2. Implementaciòn del modal
Este paso debes hacerlo directamente desde el componente del modal. Un modal se compone de tres secciones principales: la cabecera, el cuerpo y el pie de página. A continuación, te explicamos cómo implementarlo paso a paso.
Cabecera
En esta zona al igual que en una web, es crucial poner información clave que permita al usuario identificar de que trata esta alerta, pop ip o modal. Este es un ejemplo:
{/* Cabecera */}
<Modal.Header closeButton >
<Modal.Title>Título del modal</Modal.Title>
</Modal.Header>Cuerpo
En esta zona define el contenido clave que debes mostrar como un formulario, el contenido de la alerta entre otros:
{/* Cuerpo */}
<Modal.Body>
<h2>Este ya es el contenido del modal</h2>
<p>Este es el texto descriptivo del modal</p>
<p>Dato Uno: {datoUno} </p>
<p>Dato Dos: {datoDos} </p>
</Modal.Body>Pie de página o footer
En esta zona define la última parte del modal, donde puedes agregar botones de llamada a la acción:
<Modal.Footer>
<Button className="w-100" variant="primary" onClick={ejecutar} >
Ejecutar acción
</Button>
</Modal.Footer>3. Pasar datos del componente principal al modal
Para enviar datos desde el componente principal al modal, puedes usar props. Por ejemplo, define algunos datos en el componente principal justo donde importas el componente del modal y pásalos como props al modal. Dentro del modal, puedes acceder a estos datos a través de props y mostrarlos, así:
{/* Importamos modal */}
<ModalComponente datoUno={"Dato 1"} datoDos={"Dato 2"} />Es importante notar que puedes pasar los valores que desees, siempre y cuando los captures desde el modal como props.
4. Devolver datos del componente principal al modal
Si necesitas que el modal envíe información de vuelta al componente principal, crea una función en el componente principal y pásala como prop al modal. Llama a esta función con los datos que desees enviar cuando el usuario interactúe con el modal.
En teoría es solamente añadir la función a la importación del modal, así:
{/* Importamos modal */}
<ModalComponente datoUno={"Dato 1"} datoDos={"Dato 2"} datosRecibidos={datosRecibidos} />Claro que dentro de home, que es el componente que importa el modal, exista la función datosRecibidos, así:
async function datosRecibidos(datos) {
console.log("Dato decibido: ", datos);
}De esta manera, los datos que recibimos los podemos por ejemplo, imprimir. Ahora, desde el modal es clave que la función al ejecutar una acción con un botón por ejemplo, añada elementos. así:
async function ejecutar(){
let dato = "Este es el dato enviado desde el modal";
datosRecibidos({
dato
});
handleClose();
}Justo al hacer click, envía dato a la función recibida en props, y esta la recibe el componente principal, home. NO OLVIDES recuperar la función como props, como las anteriores datoUno y datoDos.
let datosRecibidos = props.datosRecibidos; /Video de ayuda
Hice este video para ayudarte en el proceso. Si te gusta no olvides dar Like y suscribirte!
Producto sugerido
Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.
Quntis Lámpara para monitor de computadora, barra de luz para monitor de pantalla para el cuidado de los ojos, lámpara de tareas LED de lectura electrónica con atenuación automática, barra de lámpara regulable, control táctil, sin deslumbramiento de pantalla, ahorro de espacio, lámparas de escritorio para oficina en casa
- Sin reflejos de pantalla y sin parpadeo, antiluz azul: la barra de luz para monitor de computadora Quntis tiene un diseño óptico asimétrico único que ilumina solo tu escritorio y teclado mientras garantiza que no se reflejen en la pantalla. Gracias a su avanzado sistema de protección ocular, nuestras lámparas de escritorio para oficina en casa bloquean la luz azul y la radiación óptica, aliviando eficazmente la fatiga ocular para proteger tus ojos. Es la opción ideal para estudiantes, diseñadores de pintura y trabajadores de oficina de negocios.
Conclusión
Ahora ya sabes cómo crear y utilizar un modal en React con React Bootstrap. Recuerda que un modal debe tener una cabecera, un cuerpo y un pie de página, y puedes personalizarlo según tus necesidades. ¡Experimenta con el diseño y las funciones para adaptarlo a tu aplicación!
