Cómo crear un componente de notificación personalizado en React usando SweetAlert

SweetAlert es una biblioteca popular que le brinda la capacidad de crear componentes de notificación personalizados para su aplicación React. Puede usar notificaciones para alertar a los usuarios sobre información importante, errores o acciones exitosas dentro de su aplicación. Esto se suma a una gran experiencia de usuario.

Instalación de la biblioteca SweetAlert

Usar el dulcealerta biblioteca para crear notificaciones, debe instalarlo usando cualquier administrador de paquetes de su elección.

Puede instalarlo a través de la administrador de paquetes NPM ejecutando el siguiente comando en su terminal:

npm instalar alerta dulce --guardar

Uso de SweetAlert para crear notificaciones

Crear notificaciones personalizadas en su aplicación React usando la biblioteca SweetAlert es similar a utilizando la biblioteca de Toastify. El tragar La función proporcionada por la biblioteca SweetAlert crea una instancia del componente de notificación y define las propiedades de la notificación.

He aquí un ejemplo del uso de la tragar() función para crear un componente de notificación:

importar Reaccionar de'reaccionar'
importar tragar de'alerta dulce'
funciónaplicación() {
constante notificar = () => tragar'Hola');
devolver (



Haz clic en mí</button>
 </div>
 )
}
exportarpor defecto aplicación

Al hacer clic en el botón se llamará al tragar función, que mostrará una notificación con el mensaje "Hola".

El tragar La función toma tres parámetros. El primer parámetro es el título de la notificación, el segundo parámetro es el mensaje y el tercero es el icono que se mostrará en su notificación.

Puede configurar el icono parámetro a uno de los valores predefinidos, es decir, éxito, advertencia, error, o información. El icono de notificación se basará en los valores que pasó.

Por ejemplo:

importar Reaccionar de'reaccionar'
importar tragar de'alerta dulce'
funciónaplicación() {
constante notificar = () => tragar'Hola', 'Bienvenido a mi página', 'éxito');
devolver (



Haz clic en mí</button>
 </div>
 )
}
exportarpor defecto aplicación

Cuando el usuario hace clic en el botón, llama al notificar función. Esta función luego mostrará una notificación con el mensaje "Hola" y "Bienvenido a mi página" con un ícono de éxito.

Una alternativa al uso de la tragar función con los tres parámetros sería utilizar el tragar función con el parámetro del objeto. Este parámetro de objeto contiene propiedades que definen el componente de notificación.

Por ejemplo:

importar Reaccionar de'reaccionar'
importar tragar de'alerta dulce'
funciónaplicación() {
constante notificar = () => tragar
 {
 título: 'Hola',
 texto: 'Bienvenido a mi página',
 icono: 'éxito',
 botón: 'DE ACUERDO',
 }
 );
devolver (



Haz clic en mí</button>
 </div>
 )
}
exportarpor defecto aplicación

En el bloque de código anterior, el tragar La función toma un objeto con las siguientes propiedades: título, texto, icono, y botón.

El título especifica el título de la notificación, mientras que la propiedad texto propiedad define el mensaje. Con el icono propiedad, puede especificar el tipo de icono que se muestra en la notificación.

Por último, el botón La propiedad especifica el texto del botón que se muestra en la notificación. En este caso, el botón muestra el texto DE ACUERDO.

Personalización de la propiedad del botón

Puedes personalizar el botón propiedad de su componente de notificación para adaptarse a sus necesidades de diseño. El botón property toma un objeto con propiedades utilizadas para configurar el comportamiento y la apariencia del botón.

Un botón predeterminado contiene las siguientes propiedades:

tragar
 {
 botón: {
 texto: "DE ACUERDO",
 valor: verdadero,
 visible: verdadero,
 nombre de la clase: "",
 closeModal: verdadero
 },
 }
 );

En el bloque de código anterior, las siguientes propiedades se usan con el botón:

• texto: El texto que se mostrará en el botón.
• valor: el valor que se devolverá cuando el usuario haga clic en el botón. En este caso, el valor es verdadero.
• visible: un valor booleano indica si el botón debe estar visible.
• nombre de la clase: una cadena que representa la clase CSS que se aplicará al botón.
• closeModal: un valor booleano que indica si el modal debe cerrarse cuando se hace clic en el botón.

También puede renderizar más de un botón usando una matriz con el botones propiedad. La matriz tomará cadenas como sus elementos.

Por ejemplo:

tragar
 {
 botones: ["Cancelar", "De acuerdo"],
 }
 );

En este ejemplo, su componente de notificación contendrá dos botones con los textos Cancelar y De acuerdo. Configuración de la botones propiedad a FALSO presentará una notificación sin botón.

Representación de elementos HTML dentro del componente de notificación

También puede representar elementos HTML además de cadenas simples como una notificación. Esto proporciona una amplia gama de opciones de personalización.

Por ejemplo:

importar Reaccionar de'reaccionar'
importar tragar de'alerta dulce'
funciónaplicación() {
constante notificar = () => tragar
 {
 contenido: {
 elemento: 'aporte',
 atributos: {
 marcador de posición: 'Nombre de pila',
 tipo: 'texto'
 }
 },
 botones: 'Inscribirse'
 }
 )
devolver (

"aplicación">
Haz clic en mí</button>
 </div>
 )
}
exportarpor defecto aplicación

En este ejemplo, se utiliza el contenido propiedad para representar un campo de entrada con texto de marcador de posición.

Usted especifica el contenido de la notificación usando el contenido propiedad y el elemento HTML para representar con el elemento propiedad. Para especificar los atributos del elemento HTML, utilice el atributos propiedad.

El bloque de código anterior mostrará la siguiente notificación cuando haga clic en el elemento del botón.

Estilo del componente de notificación

En lugar de adherirse al estilo de cuadro de notificación predeterminado proporcionado por la biblioteca SweetAlert, puede personalizar la apariencia del cuadro de notificación al aplicando sus propios estilos CSS.

Usarás el nombre de la clase property para agregar sus estilos a la notificación. El nombre de la clase La propiedad define una clase CSS para la notificación.

Por ejemplo:

tragar
 {
 título: 'Hola',
 texto: 'Bienvenido a mi página',
 botón: FALSO,
 nombre de la clase: 'alerta',
 }
 )

La notificación en el bloque de código anterior tiene un nombre de la clase valor alerta. Después de crear la notificación y definir el nombre de la clase, definirás tus estilos CSS:

.alerta{
color de fondo: verde;
Familia tipográfica: cursivo;
borde-radio: 15píxeles;
}

Los estilos CSS anteriores se aplicarán a la notificación en el procesamiento:

Cerrar el componente de notificación

La biblioteca SweetAlert ofrece varias opciones para personalizar la forma en que se cierran las notificaciones. Estas opciones son las cerrarEnEsc, closeOnClickOutside, y Temporizador propiedades.

El cerrarEnEsc La propiedad determina si el cuadro de notificación se cierra cuando el usuario presiona la tecla Esc en su teclado. El cerrarEnEsc propiedad toma un valor booleano.

tragar
 {
 ...,
 cerrarEnEsc: FALSO,
 }
 )

Por defecto, el cerrarEnEsc la propiedad se establece en verdadero. En el bloque de código anterior, está configurando el cerrarEnEsc propiedad a FALSO. Al establecer la propiedad en FALSO, el usuario no puede cerrar el cuadro de notificación presionando la tecla Esc.

También puede determinar si el usuario puede cerrar el cuadro de notificación haciendo clic fuera del cuadro con el closeOnClickOutside propiedad.

Si la propiedad se establece en verdadero, el closeOnClickOutside La propiedad permite cerrar el cuadro de notificación haciendo clic en cualquier lugar fuera de él. Este es el comportamiento predeterminado de SweetAlert. Para detener este comportamiento, configure el closeOnClickOutside propiedad a FALSO.

tragar
 {
 ...,
 closeOnClickOutside: FALSO,
 }
 )

Con el Temporizador propiedad, puede establecer un límite de tiempo para que el cuadro de notificación se cierre automáticamente. El Temporizador La propiedad toma un valor entero en milisegundos.

tragar
 {
 ...,
 Temporizador: 5000,
 }
 )

En este ejemplo, el Temporizador la propiedad se establece en 5000. La notificación solo será visible durante 5 segundos.

Notificaciones personalizadas eficientes usando SweetAlert

SweetAlert es una poderosa biblioteca con la que puede crear notificaciones personalizadas en una aplicación React. Usando la biblioteca tragar función, ahora puede crear notificaciones con propiedades y comportamiento personalizados. También puede utilizar otras bibliotecas como React-Toastify para crear alertas personalizadas en una aplicación React.