Come creare avvisi personalizzati in React utilizzando React-Toastify

I messaggi di avviso vengono spesso utilizzati nelle app Web per visualizzare avvisi, errori, messaggi di successo e altre informazioni preziose.

Esistono alcuni pacchetti e framework popolari per creare messaggi di avviso in React. React-Toastify è una libreria React che ti consente di aggiungere notifiche e messaggi di avviso alle tue applicazioni.

Installazione di React Toastify

Per installare Toastify nel tuo progetto React, esegui questo comando nella directory del tuo progetto:

npm install --save react-toastify

Configurazione di Toastify

Per utilizzare il pacchetto Toastify, dovrai importare il file ToastContenitore, pane abbrustolito metodo e il file CSS di accompagnamento fornito dal pacchetto.

IL ToastContenitore all'interno del componente App memorizza tutte le notifiche toast create.

importare {ToastContainer, toast} da"reagire-tostare";
importare'react-toastify/dist/ReactToastify.css';





instagram viewer
funzioneApp() {
ritorno(



 </div>
 );
}

Puoi usare il pane abbrustolito metodi per creare notifiche toast per il tuo progetto React:

funzioneApp() {
cost notifica = () => brindisi.successo("Ciao!");
ritorno(


Notifica</button>

 </div>
 );
}

Facendo clic sul pulsante generato da questo codice, si chiamerà il file brindisi.successo metodo, passandogli il messaggio "Hello There!" corda. Questo creerà una notifica di brindisi che visualizza il messaggio sullo schermo, in questo modo:

Nota che ci sono diversi tipi di metodi toast che puoi chiamare, come ad esempio brindisi.info(), brindisi.errore(), brindisi.successo(), brindisi.avviso(). Ciascuno di questi metodi ha uno stile di colore sottile per riflettere il tipo di messaggio.

Posizionamento delle notifiche di Toast

Per impostazione predefinita, le notifiche pop-up vengono visualizzate nella parte in alto a destra della schermata dell'app Web. Puoi cambiarlo impostando la proprietà position sul file ToastContenitore. Sono disponibili sei valori di posizione: in alto a destra, in alto al centro, in alto a sinistra, in basso a destra, in basso al centro e in basso a sinistra.

Per esempio:

funzioneApp() {
cost notifica = () => brindisi.successo("Ciao!");
ritorno(


Notifica</button>
"a sinistra in alto"/>
 </div>
 );
}

Impostare il puntello di posizione sul ToastContenitore in alto a sinistra assicura che tutte le notifiche pop-up vengano visualizzate dal lato in alto a sinistra dello schermo.

È possibile modificare la posizione predefinita per le singole notifiche di brindisi utilizzando l'elica di posizione del pane abbrustolito metodi:

funzioneApp() {
cost notifica = () => brindisi.successo("Ciao!", {posizione: pane abbrustolito. POSITION.TOP_CENTER});
ritorno(


Notifica</button>
"a sinistra in alto"/>
 </div>
 );
}

Puoi anche posizionare le notifiche di Toast utilizzando la proprietà CSS position, ma l'elica di posizione di Toastify è il modo standard per farlo.

Gestione dell'autoClose Prop del metodo Toast e ToastContainer

È possibile modificare l'ora di visualizzazione delle notifiche popup. Puoi controllare per quanto tempo una notifica di avviso popup rimane aperta utilizzando il autoClose puntello. È possibile modificare il tempo di ritardo per tutte le notifiche popup e le notifiche popup specifiche per individuo. IL autoClose prop accetta solo il valore booleano false o una durata in millisecondi.

Per modificare il tempo di ritardo per tutte le notifiche di avviso popup, utilizzare il autoClose puntello all'interno del ToastContenitore elemento.

Per esempio:

funzioneApp() {
cost notifica = () => brindisi.successo("Ciao!");
ritorno(


Notifica</button>
5000}/>
 </div>
 );
}

Con le impostazioni di cui sopra, tutte le notifiche di avviso popup verranno visualizzate esattamente per cinque secondi (5.000 millisecondi).

Usando il autoClose proprietà di ciascuno pane abbrustolito metodo, è possibile personalizzare il tempo di ritardo per le singole notifiche popup.

Per esempio:

funzioneApp() {
cost notificaUno = () => brindisi.info("Chiuderà tra 10 secondi", {autoClose: 10000});
cost notificaDue = () => brindisi.info("Chiuderà tra 15 secondi", {autoClose: 15000});
ritorno (


Notifica uno</button>
Notifica Due</button>

 </div>
 );
}

Per impedire la chiusura predefinita della notifica avviso popup, è possibile impostare il file autoClose prop a falso. Puoi assicurarti che l'utente chiuda manualmente ogni notifica popup impostando il file autoClose puntello del ToastContenitore a falso.

Per esempio:

funzioneApp() {
cost notifica = () => brindisi.info("Ciao!");
ritorno (


Notifica</button>
falso} />
 </div>
 );
}

Impostazione del autoClose prop dell'individuo pane abbrustolito metodi per falso assicurerà inoltre che quelle specifiche notifiche popup non si chiudano per impostazione predefinita.

Rendering di notifiche non di stringa con Toastify

Puoi eseguire il rendering di stringhe, componenti di reazione e numeri come messaggi di notifica quando lavori con le notifiche popup. Per eseguire il rendering di un componente React come notifica di tipo avviso popup, devi creare il componente ed eseguirne il rendering utilizzando a pane abbrustolito metodo.

Per esempio:

funzioneMessaggio({toastProps, closeToast}) {
ritorno (


Benvenuto {toastProps.position}</p>
</button>
 </div>
 )
}
esportarepredefinito Messaggio;

Questo blocco di codice crea un componente, Messaggio. Quando si esegue il rendering di un componente come notifica, toast aggiunge toastProps E chiudiToast oggetti di scena al tuo componente. IL chiudiToast prop è una funzione che puoi usare per chiudere la notifica. IL toastProps prop è un oggetto con proprietà che memorizzano i dettagli sulla notifica popup inclusa la posizione, il tipo e altre caratteristiche.

Importa il componente Message, quindi passalo alla funzione toast(), rendendolo come una notifica toast:

importare {ToastContainer, toast} da"reagire-tostare";
importare'react-toastify/dist/ReactToastify.css';
importare Messaggio da"./componenti/Messaggio";
funzioneApp() {
cost messaggio = () => pane abbrustolito(<Messaggio />);
ritorno (


Benvenuto</button>

 </div>
 );
}

Facendo clic sul pulsante verrà visualizzata sullo schermo una notifica contenente una domanda e due pulsanti.

Notifiche di brindisi per lo styling

Non è necessario utilizzare lo stile predefinito per le notifiche di brindisi. Puoi personalizzarli per adattarli a un tema o modello di design desiderato adatto alla tua applicazione web.

Per modellare la tua notifica di brindisi, dagli un nome della classe E applicare le personalizzazioni all'interno di un file CSS.

Per esempio:

funzioneApp() {
cost notifica = () => brindisi.successo("Ciao!", {nome della classe: "messaggio brindisi"});
ritorno (


Notifica</button>
"in alto al centro" />
 </div>
 );
}

Con il nome della classe allegata alla tua notifica, puoi modellare la notifica del brindisi secondo le tue preferenze all'interno del file CSS:

.messaggio-brindisi {
colore di sfondo: #000000;
colore: #FFFFFF;
dimensione del font: 20px;
imbottitura: 1rem 0.5rim;
}

Come risultato dello stile personalizzato di cui sopra, la notifica sarà simile a questa:

Notifiche Toast per la tua applicazione web

Ora puoi creare avvisi personalizzati in React utilizzando il pacchetto React-Toastify e i suoi metodi disponibili. Applicando uno stile a questi avvisi/notifiche personalizzati secondo le tue preferenze, puoi migliorare l'esperienza utente della tua applicazione web.

React-Toastify offre un metodo rapido ed efficace per includere avvisi personalizzati nel tuo progetto React senza problemi.