La libreria SweetAlert semplifica la creazione di componenti di notifica personalizzati in React.
SweetAlert è una libreria popolare che ti dà la possibilità di creare componenti di notifica personalizzati per la tua applicazione React. È possibile utilizzare le notifiche per avvisare gli utenti di informazioni importanti, errori o azioni riuscite all'interno dell'applicazione. Ciò si aggiunge a un'ottima esperienza utente.
Installazione della libreria SweetAlert
Per usare il SweetAlert library per creare notifiche, è necessario installarla utilizzando qualsiasi gestore di pacchetti di tua scelta.
Puoi installarlo tramite il Gestore di pacchetti NPM eseguendo il seguente comando nel tuo terminale:
npm install sweetalert --save
Utilizzo di SweetAlert per creare notifiche
La creazione di notifiche personalizzate nella tua app React utilizzando la libreria SweetAlert è simile a utilizzando la libreria Toastify. IL swal La funzione fornita dalla libreria SweetAlert crea un'istanza del componente di notifica e definisce le proprietà della notifica.
Ecco un esempio di utilizzo di ingoiare() funzione per creare un componente di notifica:
importare Reagire da'reagire'
importare swal da'dolce allerta'funzioneApp() {
cost notifica = () => inghiottire('Ciao');
ritorno (
esportarepredefinito App
Facendo clic sul pulsante si chiamerà il swal funzione, che visualizzerà una notifica con il messaggio "Hello There".
IL swal funzione accetta tre parametri. Il primo parametro è il titolo della notifica, il secondo parametro è il messaggio e il terzo è l'icona da visualizzare nella notifica.
Puoi impostare il icona parametro su uno dei valori predefiniti, ad es. successo, avvertimento, errore, O informazioni. L'icona di notifica sarà quindi basata sui valori passati.
Per esempio:
importare Reagire da'reagire'
importare swal da'dolce allerta'funzioneApp() {
cost notifica = () => inghiottire('Ciao', 'Benvenuto nella mia pagina', 'successo');
ritorno (
esportarepredefinito App
Quando l'utente fa clic sul pulsante, chiama il file notificare funzione. Questa funzione visualizzerà quindi una notifica con il messaggio "Hello There" e "Welcome to my Page" con un'icona di successo.
Un'alternativa all'uso di swal funzione con i tre parametri sarebbe quello di utilizzare il file swal funzione con il parametro dell'oggetto. Questo parametro dell'oggetto contiene le proprietà che definiscono il componente di notifica.
Per esempio:
importare Reagire da'reagire'
importare swal da'dolce allerta'funzioneApp() {
cost notifica = () => inghiottire(
{
titolo: 'Ciao',
testo: 'Benvenuto nella mia pagina',
icona: 'successo',
pulsante: 'OK',
}
);ritorno (
esportarepredefinito App
Nel blocco di codice sopra, il swal La funzione accetta un oggetto con le seguenti proprietà: titolo, testo, icona, E pulsante.
IL titolo specifica il titolo della notifica, mentre il testo proprietà definisce il messaggio. Con il icona proprietà, è possibile specificare il tipo di icona visualizzata nella notifica.
Infine il pulsante La proprietà specifica il testo del pulsante visualizzato nella notifica. In questo caso, il pulsante visualizza il testo OK.
Personalizzazione della proprietà del pulsante
Puoi personalizzare il pulsante proprietà del tuo componente di notifica per soddisfare le tue esigenze di progettazione. IL pulsante property accetta un oggetto con proprietà utilizzate per configurare il comportamento e l'aspetto del pulsante.
Un pulsante predefinito contiene le seguenti proprietà:
inghiottire(
{
pulsante: {
testo: "OK",
valore: VERO,
visibile: VERO,
nome della classe: "",
closeModal: VERO
},
}
);
Nel blocco di codice sopra, le seguenti proprietà vengono utilizzate con il pulsante:
- testo: il testo da visualizzare sul pulsante.
- valore: il valore da restituire quando l'utente fa clic sul pulsante. In questo caso, il valore è VERO.
- visibile: Un valore booleano indica se il pulsante deve essere visibile.
- nome della classe: una stringa che rappresenta la classe CSS da applicare al pulsante.
- closeModal: un valore booleano che indica se il modale deve essere chiuso quando si fa clic sul pulsante.
Puoi anche eseguire il rendering di più di un pulsante utilizzando un array con l'estensione pulsanti proprietà. L'array prenderà le stringhe come suoi elementi.
Per esempio:
inghiottire(
{
pulsanti: ["Annulla", "OK"],
}
);
In questo esempio, il tuo componente di notifica conterrà due pulsanti con i testi " Annulla E OK. Impostazione del pulsanti proprietà a falso visualizzerà una notifica senza pulsante.
Rendering di elementi HTML all'interno del componente di notifica
Puoi anche eseguire il rendering di elementi HTML oltre alle semplici stringhe come notifica. Ciò fornisce una vasta gamma di opzioni di personalizzazione.
Per esempio:
importare Reagire da'reagire'
importare swal da'dolce allerta'funzioneApp() {
cost notifica = () => inghiottire(
{
contenuto: {
elemento: 'ingresso',
attributi: {
segnaposto: 'Nome di battesimo',
tipo: 'testo'
}
},
pulsanti: 'Iscrizione'
}
)ritorno (
"app">
esportarepredefinito App
In questo esempio, si utilizza il contenuto proprietà per eseguire il rendering di un campo di input con testo segnaposto.
Specificare il contenuto della notifica utilizzando il file contenuto proprietà e l'elemento HTML di cui eseguire il rendering con il elemento proprietà. Per specificare gli attributi dell'elemento HTML, si utilizza il file attributi proprietà.
Il blocco di codice sopra visualizzerà la notifica sottostante quando si fa clic sull'elemento pulsante.
Stile del componente di notifica
Anziché aderire allo stile predefinito della casella di notifica fornito dalla libreria SweetAlert, è possibile personalizzare l'aspetto della casella di notifica tramite applicando i tuoi stili CSS.
Userai il nome della classe property per aggiungere i tuoi stili alla notifica. IL nome della classe La proprietà definisce una classe CSS per la notifica.
Per esempio:
inghiottire(
{
titolo: 'Ciao',
testo: 'Benvenuto nella mia pagina',
pulsante: falso,
nome della classe: 'mettere in guardia',
}
)
La notifica nel blocco di codice sopra ha a nome della classe valore mettere in guardia. Dopo aver creato la notifica e definito il file nome della classe, definirai i tuoi stili CSS:
.mettere in guardia{
colore di sfondo: verde;
famiglia di font: corsivo;
bordo-raggio: 15px;
}
Gli stili CSS sopra si applicheranno alla notifica sul rendering:
Chiusura del componente di notifica
La libreria SweetAlert offre diverse opzioni per personalizzare il modo in cui le tue notifiche vengono chiuse. Queste opzioni sono le closeOnEsc, closeOnClickOutside, E Timer proprietà.
IL closeOnEsc La proprietà determina se la finestra di notifica si chiude quando l'utente preme il tasto Esc sulla tastiera. IL closeOnEsc proprietà assume un valore booleano.
inghiottire(
{
...,
chiudiSuEsc: falso,
}
)
Per impostazione predefinita, il closeOnEsc proprietà è impostata su VERO. Nel blocco di codice sopra, stai impostando il closeOnEsc proprietà a falso. Impostando la proprietà su falso, l'utente non può chiudere la finestra di notifica premendo il tasto Esc.
È inoltre possibile determinare se l'utente può chiudere la casella di notifica facendo clic all'esterno della casella utilizzando il closeOnClickOutside proprietà.
Se la proprietà è impostata su VERO, IL closeOnClickOutside La proprietà abilita la chiusura della casella di notifica facendo clic in un punto qualsiasi al di fuori di essa. Questo è il comportamento predefinito di SweetAlert. Per interrompere questo comportamento, impostare il file closeOnClickOutside proprietà a falso.
inghiottire(
{
...,
closeOnClickOutside: falso,
}
)
Con il Timer proprietà, è possibile impostare un limite di tempo per la chiusura automatica della finestra di notifica. IL Timer La proprietà accetta un valore intero in millisecondi.
inghiottire(
{
...,
Timer: 5000,
}
)
In questo esempio, il Timer proprietà è impostata su 5000. La notifica sarà visibile solo per 5 secondi.
Notifiche personalizzate efficienti utilizzando SweetAlert
SweetAlert è una potente libreria con cui puoi creare notifiche personalizzate in un'applicazione React. Usando la biblioteca swal funzione, ora puoi creare notifiche con proprietà e comportamento personalizzati. Puoi anche utilizzare altre librerie come React-Toastify per creare avvisi personalizzati in un'applicazione React.
