Creazione di notifiche coinvolgenti con Toastr in React

Le notifiche sono essenziali per qualsiasi applicazione Web in quanto forniscono agli utenti informazioni importanti. Invece di creare il sistema di notifica da zero, puoi utilizzare librerie esterne. Toastr è una delle librerie popolari per la creazione di notifiche nelle applicazioni JavaScript.

Installazione della libreria Toastr

Innanzitutto, inizia creando un'applicazione React con cui lavorerai. Puoi creare un'applicazione React utilizzando Vite.

Dopo aver creato l'applicazione, installa il file toastr package nel tuo progetto eseguendo il seguente comando nel tuo terminale:

npm install --save toastr

Ora hai installato il toastr pacchetto e può usarlo per visualizzare le notifiche.

Creazione di notifiche utilizzando Toastr

Per creare le notifiche, utilizzerai il file toastr funzione. IL toastr La funzione viene utilizzata per creare e visualizzare messaggi di brindisi. Prima di creare le tue notifiche, assicurati di importare il tuo file

toastr stili di notifica nel tuo file CSS.

@import'toastr';

Ecco un esempio di come si crea una notifica utilizzando il file toastr funzione:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

In questo esempio, definisci a notificare funzione. IL Cliccami pulsante chiama il notificare funzione quando si fa clic su di esso. IL notificare la funzione usa il toastr.success funzione per visualizzare una notifica di successo.

IL toastr.success funzione accetta due argomenti. Il primo argomento è il messaggio di notifica che, in questo caso, è la stringa "È bello averti qui". Il secondo argomento è il titolo della notifica, "Benvenuto".

Una notifica simile all'immagine seguente verrà visualizzata quando si fa clic su Cliccami pulsante.

In aggiunta a toastr.success funzione, il toastr oggetto fornisce altre funzioni per la creazione di notifiche. Le altre funzioni sono il toastr.errore, toastr.warning, E toastr.info. Ogni funzione crea una notifica con un colore di sfondo e un'icona diversi, in modo da poter facilmente distinguere tra diversi tipi di notifiche.

Ad esempio, quando si utilizza il toastr.errore funzione, la tua notifica sarà simile a questa:

Personalizzare le tue notifiche

Con la libreria Toastr, non puoi personalizzare le tue notifiche utilizzando i CSS tradizionali, a differenza di quando si lavora con React-Toastify. Tuttavia, Toastr offre ancora altre opzioni per personalizzare le notifiche. Puoi utilizzare queste opzioni per personalizzare la posizione, l'aspetto e la funzionalità delle tue notifiche. Devi passare le opzioni al terzo argomento del file toastr metodo.

Ecco un esempio:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Per personalizzare la notifica, questo codice utilizza il closeButton, barra di avanzamento, tempo scaduto, posizioneClasse, showMethod, E hideMethod proprietà dell'oggetto opzioni. IL closeButton proprietà determina se la notifica verrà visualizzata con un pulsante di chiusura. Accetta un valore booleano.

Usando il barra di avanzamento proprietà, è possibile aggiungere una barra di avanzamento alla notifica. Impostazione del tempo scaduto La proprietà consente di controllare per quanto tempo verrà visualizzata una notifica. Questa proprietà specifica il numero di millisecondi prima che la notifica scompaia automaticamente.

IL posizioneClasse La proprietà definisce la posizione della notifica sullo schermo. Accetta otto valori predefiniti. I valori includono:

• brindisi in alto a destra: visualizza la notifica nell'angolo in alto a destra dello schermo.
• brindisi in alto a sinistra: la notifica verrà visualizzata nell'angolo in alto a sinistra dello schermo.
• brindisi in alto al centro: la notifica verrà visualizzata nella parte superiore centrale dello schermo.
• brindisi in basso a destra: Vedrai la notifica nell'angolo in basso a destra dello schermo.
• brindisi in basso a sinistra: la notifica viene posizionata nell'angolo in basso a sinistra dello schermo.
• brindisi in basso al centro: Troverai la notifica in basso al centro dello schermo.
• toast-top-a tutta larghezza: la notifica viene visualizzata nella parte superiore dello schermo, occupando l'intera larghezza dello schermo.
• toast-bottom-full-width: la notifica occupa l'intera larghezza dello schermo e viene visualizzata nella parte inferiore.

Infine il showMethod E hideMethod le proprietà controllano le animazioni per visualizzare e nascondere la notifica. IL showMethod specifica l'animazione utilizzata per visualizzare una notifica, mentre la hideMethod La proprietà specifica l'animazione utilizzata per nascondere una notifica.

La notifica definita nel blocco di codice sopra apparirà nella parte superiore centrale dello schermo, con una barra di avanzamento e un pulsante di chiusura. Scomparirà dopo tre secondi e utilizzerà le transizioni di dissolvenza in apertura e in chiusura per apparire e scomparire.

Sembrerà qualcosa del genere.

Tieni presente che puoi personalizzare ogni notifica di Toastr con un singolo oggetto di opzioni invece di personalizzarle una alla volta. Per fare questo, utilizzerai il toastr.options proprietà. Questo oggetto proprietà contiene le proprietà di personalizzazione di tutte le tue notifiche Toastr.

Per esempio:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Questo esempio mostra come configurare tutte le notifiche per avere una barra di avanzamento, un pulsante di chiusura, un display in alto a destra angolo dello schermo, si chiude automaticamente dopo 5 secondi e utilizza le transizioni di dissolvenza in entrata e in uscita per visualizzare e scomparire.

Eseguendo l'applicazione e facendo clic sui pulsanti verrà visualizzata un'interfaccia simile all'immagine sottostante.

Rendi interattive le tue notifiche

Puoi rendere le tue notifiche più coinvolgenti aggiungendo interattività, come la possibilità di fare clic su di esse. Per fare questo, usi il al clic proprietà. IL al clic property è una delle opzioni di personalizzazione fornite dalla libreria Toastr. Specifica una funzione che viene eseguita quando si fa clic sulla notifica, simile a click event (uno dei listener di eventi di JavaScript).

Ecco un esempio di come utilizzare il al clic proprietà:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Nel blocco di codice sopra, l'oggetto options del file toastr.success funzione contiene un al clic proprietà. IL al clic proprietà chiama il toastr.clear funzione, che cancella la notifica dallo schermo.

Crea notifiche coinvolgenti utilizzando Toastr

Qui hai imparato come utilizzare la libreria Toastr per creare notifiche accattivanti per la tua applicazione React. Hai installato Toastr, configurato nella tua app e creato e personalizzato le tue notifiche. Toastr è una potente libreria che può aiutarti a creare notifiche informative e visivamente accattivanti. Oltre a Toastr, puoi anche provare altre librerie come SweetAlert, React-Toastify o Chakra UI.