Agregue efectos emergentes a su aplicación React.js

Agregue efectos emergentes a su aplicación React.js

Las ventanas emergentes son una excelente manera de captar la atención de su usuario y mostrar información importante. Puede usarlos para cosas como mensajes de confirmación y mensajes de error. O simplemente puede usarlos para mostrar información adicional sobre un elemento en una página.





En React, hay dos formas de crear ventanas emergentes: usando ganchos de React o usando un módulo externo.



MAKEUSEOF VÍDEO DEL DÍA

Cómo crear ventanas emergentes en React.js

Primero, crear una aplicación de reacción simple . Después de eso, puede agregar una ventana emergente utilizando cualquiera de los dos métodos. Puede usar ganchos React o un módulo externo.





aplicaciones para enviar dinero a amigos

1. Uso de ganchos de reacción

El enfoque de ganchos es más simple y solo requiere unas pocas líneas de código.

Primero, debe crear una función que abra la ventana emergente. Puede definir esta función en el componente que mostrará la ventana emergente.



A continuación, debe usar el enlace useState para crear una variable de estado para la ventana emergente. Puede usar esta variable de estado para determinar si la ventana emergente debe estar abierta o no.

Finalmente, debe agregar un botón a su componente que activará la ventana emergente. Cuando haga clic en este botón, establezca la variable de estado en verdadero, lo que hará que aparezca la ventana emergente.



Eche un vistazo al código para este enfoque:

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

Primero, este código importa el enlace useState de la biblioteca de reacción central. Luego, la función Ejemplo usa el gancho useState para crear una variable de estado llamada isOpen. Esta variable de estado determina si la ventana emergente debe estar abierta o no.



A continuación, agregue un botón al componente que activará la ventana emergente. Cuando haga clic en este botón, la variable de estado se establecerá en verdadero, lo que hará que aparezca la ventana emergente.

Finalmente, agregue un botón al componente que cerrará la ventana emergente. Cuando haga clic en este botón, la variable de estado se establecerá en falso, lo que hará que desaparezca la ventana emergente.

necesita permiso del sistema para realizar esta acción windows 10
página de reacción con un botón y ventana emergente abierta

2. Uso de un módulo externo

También puede crear ventanas emergentes en React usando un módulo externo. Hay muchos módulos disponibles que puede usar para este propósito.

Un módulo popular es react-modal. react-modal es un módulo simple y liviano que le permite crear diálogos modales en React.

Para usar react-modal, primero debe instalarlo usando npm:

npm install react-modal

Una vez que haya instalado react-modal, puede importarlo a su componente React:

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

En este código, todavía está usando los ganchos React pero con el módulo react-modal. Con el módulo react-modal, puede agregar más funciones a la ventana emergente. Como puede ver, el código es muy similar al enfoque anterior. La única diferencia es que ahora está utilizando el componente ReactModal de react-modal en lugar de crear el suyo propio.

Primero, debe importar el módulo react-modal. Luego, usa el componente ReactModal para envolver el contenido de su ventana emergente. Use la propiedad isOpen para determinar si el modal debe estar abierto o no.

página de reacción con una ventana emergente

Una vez que haya creado su ventana emergente, es posible que desee agregarle funciones adicionales. Por ejemplo, es posible que desee cerrar la ventana emergente cuando el usuario haga clic fuera de ella.

Para hacer esto, debe usar el accesorio onRequest del componente react-modal. Esta prop toma una función como su valor. Esta función se ejecutará cuando el usuario haga clic fuera del modal.

Por ejemplo, para cerrar la ventana emergente cuando el usuario hace clic fuera de ella, usaría el siguiente código:

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

La función que estamos pasando a onRequest prop simplemente establece la variable de estado isOpen en falso. Esto hará que el modal se cierre.

También puede agregar otros accesorios al componente ReactModal para personalizarlo aún más. Para obtener una lista completa de accesorios, puede consultar la documentación de react-modal.

que significa tbh en facebook

Agregar estilo en ventanas emergentes

Una vez que haya creado su ventana emergente, es posible que desee agregarle algo de estilo. Hay muchas formas de aplicar estilo a los componentes de React, pero nos centraremos en los estilos en línea.

Los estilos en línea son estilos que puede agregar directamente a un componente de React. Para agregar estilos en línea, debe usar la propiedad de estilo. Esta propiedad toma un objeto como su valor, donde las claves son las propiedades de estilo y los valores son los valores de estilo.

Por ejemplo, para agregar un color de fondo blanco y un ancho de 500 px a una ventana emergente, usaría el siguiente código:

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

En este código, agrega la propiedad de estilo al elemento div con las propiedades backgroundColor y width. Tú también puedes use Tailwind CSS en la aplicación de reacción para diseñar tus ventanas emergentes.

Aumente la tasa de conversión con ventanas emergentes

Las ventanas emergentes pueden ayudar a aumentar las tasas de conversión al mostrar información importante al usuario. Por ejemplo, puede usar una ventana emergente para mostrar un código de descuento o una oferta especial. También puede usar una ventana emergente para recopilar direcciones de correo electrónico para su boletín informativo. Agregar una ventana emergente a su aplicación React es una excelente manera de aumentar las tasas de conversión.

También puede implementar fácilmente su aplicación React de forma gratuita en las páginas de GitHub.