Vedi ToastProvider prima di usare questo hook

useToastNotification

L’hook useToastNotification permette di mostrare messaggi toast di diverse tipologie:

• Informazioni
• Allarmi
• Errori
• Successo

Con questo hook viene centralizzata la gestione degli stili e del posizionamento delle notifiche toast.

Le librerie terze utilizzate sono:

• react-toastify versione 9.1.3

Documentazione React-Toastify

La firma del nostro hook è la seguente:

const useToastNotification = (globalOptions?: ToastOptions<Record<string, never>> | undefined) => {//...logica}

L’hook richiede un singolo parametro “globalOptions” in input che può essere opzionale, il tipo del parametro previsto è derivato dalla libreria react-toastify ( a questo url è possibile tramite interfaccia web creare le opzioni di personalizzazione di un toast, per poi darle in input al nostro hook)

Se al nostro hook viene passato come argomento un oggetto con la configurazione del toast, queste opzioni verranno impostate di default per tutti i tipi di toast che si possono creare tramite questo hook. Se non viene passata alcuna configurazione in input, allora l’hook internamente definisce un oggetto di configurazione standard.

Configurazione

Configurazione hook di default:

const defaultOptions: ToastOptions<Record<string, never>> = {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: false,
progress: undefined,
theme: "light",
...globalOptions
}

Funzioni esportate

Vengono poi esportate le seguenti funzioni:

• notifySuccess -> mostra un toast di successo
• notifyError -> mostra un toast di errore
• notifyWarning -> mostra un toast di allarme
• notifyInfo -> mostra un toast informativo
• customToast -> permette di creare un toast completamente custom

Logica delle funzioni esportate

notifySuccess, notifyError, notifyWarning, notifyInfo chiamano la funzione “toast” della libreria “react-toastify” e hanno la seguente firma

const notifySuccess = (message: string | React.ReactNode, options?: ToastOptions<Record<string, never>> | undefined, props?: AlertProps) => {//logica...}

• message: il testo da visualizzare nel toast
• options: oggetto di configurazione del toast, uguale a quello che si puo dare in input al nostro hook
• props: eventuali personalizzazioni del componente “Alert” della MUI che usiamo come base per i toast

il corpo delle funzioni notifySuccess, notifyError, notifyWarning, notifyInfo contiene la seguente logica:

toast.success(
      <div>
        <Alert severity="success" onClose={handleOnClose} {...props}>
        {message}
      </Alert>
      </div>,
  { ...options, ...defaultOptions }
)

NB: si prende toast.success come esempio (quindi la funzione notifySuccess esportata dal nostro hook), success cambia in warning, info o error in base al toast che si vuole mostrare

Di base viene sempre passato il componente Alert della MUI alla funzione toast.
handleClose è definita all’interno del nostro hook ma non esegue alcuna funzionalità.
severity serve a dare un colore specifico al nostro alert vedi qui.
message invece è il testo da visualizzare nel toast.
defaultOptions sono le opzioni di default definite nel nostro hook ( che ricordo possono essere cambiate dando in input un oggetto di configurazione al nostro hook ).
options invece sono le opzioni specifiche per la funzione chiamata nel caso in cui sia necessario applicare delle modifiche particolari andando a sopra alla configurazione di default.

Funzione CustomToast

La funzione customToast esportata permette di creare un toast completamente custom staccato da tutte le logiche del nostro hook (usare solo se strettamente necessario!)
Essendo di fatto la stessa funzione fornita dalla libreria react-toastify ri-esportata, rimando alla loro documentazione per capire a pieno il suo funzionamento.