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 ToastContainer , il metodo toast e il file CSS associato fornito dal pacchetto.

Il ToastContainer all’interno del componente App archivia tutte le notifiche di avviso popup create.

import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';


function App() {
  return(
    <div>
      <ToastContainer/>
    </div>
  );
}

Puoi utilizzare i metodi toast per creare notifiche toast per il tuo progetto React:

function App() {
  const notify = () => toast.success("Hello There!");


  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer/>
    </div>
  );
}

Facendo clic sul pulsante generato da questo codice si chiamerà il metodo toast.success , passandogli la stringa “Hello There!”. 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 toast.info() , toast.error() , toast.success() , toast.warning() . 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 modificare questa impostazione impostando la proprietà position su ToastContainer . 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:

function App() {
  const notify = () => toast.success("Hello There!");


  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer position="top-left"/>
    </div>
  );
}

L’impostazione dell’elica di posizione su ToastContainer in alto a sinistra assicura che tutte le notifiche di avviso popup vengano visualizzate dal lato in alto a sinistra dello schermo.

Puoi modificare la posizione predefinita per le singole notifiche di avviso popup utilizzando l’opzione di posizione dei metodi di avviso popup :

function App() {
  const notify = () => toast.success("Hello There!", {position: toast.POSITION.TOP_CENTER});


  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer position="top-left"/>
    </div>
  );
}

Puoi anche posizionare le notifiche di Toast utilizzando la proprietà position CSS, ma il prop 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 prop autoClose . È possibile modificare il tempo di ritardo per tutte le notifiche popup e le notifiche popup specifiche per individuo. La prop autoClose accetta solo il valore booleano false o una durata in millisecondi.

Per modificare il tempo di ritardo per tutte le notifiche di tipo avviso popup, utilizza la prop autoClose all’interno dell’elemento ToastContainer .

Per esempio:

function App() {
  const notify = () => toast.success("Hello There!");


  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer autoClose={5000}/>
    </div>
  );
}

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

Utilizzando la proprietà autoClose di ciascun metodo di avviso popup , puoi personalizzare il tempo di ritardo per le singole notifiche di avviso popup.

Per esempio:

function App() {
  const notifyOne = () => toast.info("Will close in 10 seconds", {autoClose: 10000});
  const notifyTwo = () => toast.info("Will close in 15 seconds", {autoClose: 15000});


  return (
    <div>
      <button onClick={notifyOne}>Notify One</button>
      <button onClick={notifyTwo}>Notify Two</button>
      <ToastContainer />
    </div>
  );
}


Per evitare che la notifica avviso popup si chiuda per impostazione predefinita, puoi impostare il prop autoClose su false . Puoi assicurarti che l’utente chiuda manualmente ogni notifica di avviso popup impostando la prop autoClose di ToastContainer su false.

Per esempio:

function App() {
  const notify = () => toast.info("Hello There!");


  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer autoClose={false} />
    </div>
  );
}


L’impostazione della prop autoClose dei singoli metodi di avviso popup su false assicurerà inoltre che quelle specifiche notifiche avviso 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 avviso popup, devi creare il componente e renderizzarlo utilizzando un metodo avviso avviso.

Per esempio:

function Message({toastProps, closeToast}) {
  return (
    <div>
     <p>Welcome {toastProps.position}</p>
     <button onClick={closeToast}></button>
    </div>
   )
}


export default Message;


Questo blocco di codice crea un componente, Message . Durante il rendering di un componente come notifica, toast aggiunge toastProps e closeToast props al tuo componente. La prop closeToast è una funzione che puoi usare per chiudere la notifica. L’ elica toastProps è un oggetto con proprietà che memorizzano i dettagli sulla notifica avviso popup inclusa la sua posizione, il tipo e altre caratteristiche.

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

import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import Message from "./components/Message";


function App() {
  const msg = () => toast(<Message />);

  return (
    <div>
      <button onClick={msg}>Welcome</button>
      <ToastContainer />
    </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 dare uno stile alla notifica del brindisi, assegnagli un className e applica le personalizzazioni all’interno di un file CSS.

Per esempio:

function App() {
  const notify = () => toast.success("Hello There!", {className: "toast-message"});


  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer position="top-center" />
    </div>
  );
}


Con il className allegato alla tua notifica, puoi modellare la notifica del brindisi secondo le tue preferenze all’interno del file CSS:

.toast-message {
  background-color: #000000;
  color: #FFFFFF;
  font-size: 20px;
  padding: 1rem 0.5rem;
}


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.