Come creare un componente di notifica personalizzato in React

Esistono diversi pacchetti di terze parti disponibili in React che possono aiutarti a creare un componente di notifica. Tuttavia, se desideri solo un semplice componente di notifica, potresti crearne uno tuo per evitare di aggiungere dipendenze non necessarie alla tua applicazione.

Impostazione del progetto

Desideri usa Vite per configurare l'app React. Vite è uno strumento di compilazione che ti consente di impalcare rapidamente un progetto React.

Per iniziare, usa il gestore di pacchetti di filati per creare un nuovo progetto Vite eseguendo il comando seguente.

filato crea vite

Il comando ti chiederà di inserire un nome per il progetto. Immettere il nome del progetto e premere Invio. Successivamente, ti chiederà di selezionare un framework. Scegliere reagire e premi Invio. Infine, ti chiederà di selezionare una variante, scegliere javascript e quindi premere Invio.

Ecco le configurazioni che utilizzerà questo tutorial:

Dopo che Vite ha creato il progetto, vai alla cartella del progetto e aprilo utilizzando un editor di codice.

È quindi possibile avviare il server di sviluppo eseguendo il seguente comando.

filo dev

Questo aprirà la tua nuova applicazione React nel tuo browser predefinito all'indirizzo http://localhost: 5173/.

Progettazione del componente di notifica

Per creare un componente di notifica flessibile, deve essere in grado di gestire diversi tipi di notifiche con titoli, descrizioni e stili diversi. Ad esempio, deve eseguire il rendering di una notifica di avviso, successo e errore.

Di seguito sono riportate diverse varianti che il componente di notifica dovrebbe essere in grado di eseguire il rendering.

Puoi ottenere ciò passando oggetti di scena al componente che specifica il tipo di notifica di cui eseguire il rendering, il titolo e il testo della descrizione. Utilizzando questi oggetti di scena, puoi personalizzare il componente e riutilizzarlo in tutta l'applicazione con il minimo sforzo. Se hai bisogno di un ripasso sugli oggetti di scena, ecco un articolo che spiega come usare gli oggetti di scena in React.

Creazione del componente di notifica

Nel src cartella, creare un nuovo file denominato Notifica.jsx e aggiungi il seguente codice.

esportarepredefinitofunzioneNotifica({tipo, titolo, descrizione}) {
ritorno (


 {/* Contenuto della notifica */}
 </div>
 )
}

Questo codice crea un componente funzionale chiamato Notifica con tre oggetti di scena: tipo, titolo, E descrizione. Utilizzerai questi oggetti di scena per personalizzare lo stile e il contenuto della notifica.

Dal design, il componente ha un paio di icone, ovvero informazioni, e un'icona a forma di croce. Puoi scarica icone gratuite o utilizzare un componente icona da un pacchetto come reagire-icone. Questo tutorial utilizzerà reagire-icone quindi installalo eseguendo il comando seguente.

il filato aggiunge le icone di reazione

Quindi importa le icone nella parte superiore del file Notifica componente.

importare { RxCross2, RxInfoCircled } da"icone-reagisci/rx"

Ora puoi modificare il componente per utilizzare le icone, il titolo e i valori prop della descrizione per creare il contenuto della notifica.

esportarepredefinitofunzioneNotifica({tipo, titolo, descrizione}) {
ritorno (







{titolo}</div>
{descrizione}</div>
 </div>
 </div>

 </div>
 )
}

Il passaggio successivo consiste nello modellarlo in base al tipo passato.

Un approccio che puoi adottare è definire le classi CSS per ogni tipo di notifica che desideri visualizzare. È quindi possibile applicare in modo condizionale la classe appropriata in base al tipo passato.

Per iniziare, crea un nuovo file chiamato notifica.css e importalo in Notifica.jsx aggiungendo il seguente codice in alto.

importa "./notifica.css"

Poi dentro notifica.css definire gli stili di base per il componente di notifica:

.notifica {
Schermo: flettere;
direzione flessibile: riga;
align-elementi: avvio flessibile;
imbottitura: 8px;
}
.notifica__sinistra {
Schermo: flettere;
direzione flessibile: riga;
imbottitura: 0px;
spacco: 8px;
margine destro: 24px;
}
.notifica__contenuto {
Schermo: flettere;
direzione flessibile: colonna;
align-elementi: avvio flessibile;
imbottitura: 0px;
}
.notifica__titolo {
famiglia di font: "Inter";
stile carattere: normale;
font-weight: 500;
dimensione del font: 14px;
}
.notifica__descrizione {
famiglia di font: "Inter";
stile carattere: normale;
font-weight: 400;
dimensione del font: 12px;
imbottitura: 0;
}

È quindi possibile definire gli stili per i diversi tipi di notifica aggiungendo il seguente codice nel file CSS.

.notifica__successo {
sfondo: #f6fef9;
confine: 1pxsolido#2f9461;
bordo-raggio: 8px;
}
.notifica__errore {
sfondo: #fffbfa;
confine: 1pxsolido#cd3636;
bordo-raggio: 8px;
}
.notifica__avviso {
sfondo: #fffcf5;
confine: 1pxsolido#c8811a;
bordo-raggio: 8px;
}

Il codice precedente modella il contenitore delle notifiche in base al tipo passato.

Per personalizzare il titolo, utilizza i seguenti stili.

.notifica__titolo__successo {
colore: #2f9461;
}
.notification__title__warning {
colore: #c8811a;
}
.notifica__titolo__errore {
colore: #cd3636;
}

Per il testo della descrizione personalizzata, utilizza questi stili.

.notifica__descrizione__successo {
colore: #53b483;
}
.notifica__descrizione__avviso {
colore: #e9a23b;
}
.notifica__descrizione__errore {
colore: #f34141;
}

E per le icone, usa le seguenti classi.

.notification_icon_error {
colore: #cd3636;
}
.notification__icon__success {
colore: #2f9461;
}
.notification__icon__warning {
colore: #c8811a;
}

Poi, nel Notifica componente, è possibile applicare in modo condizionale la classe appropriata in base al tipo prop, in questo modo:

esportarepredefinitofunzioneNotifica({tipo, titolo, descrizione}) {
ritorno (
`notifica di notifica__${tipo}`}>
`notifica__sinistra`}>
`notifica__icona__${tipo}`}/>
"notifica__contenuto">
`notifica__titolo notifica__titolo__${tipo}`}>{titolo}</div>
`notifica__descrizione notifica__descrizione__${tipo}`}>{descrizione}</div>
 </div>
 </div>
`notifica__icona__${tipo}`}/>
 </div>
 )
}

In questo componente, stai impostando dinamicamente la classe in base al tipo, ad esempio notifica__successo O notifica__errore.

Per vederlo in azione, importa il componente Notification in App.jsx e usalo come segue:

importare Notifica da'./Notifica'
funzioneApp() {
ritorno (
 <>
 tipo="successo"
 titolo="Attività completata"
 descrizione="Il tuo compito è stato completato con successo."
 />
 </>
 )
}
esportarepredefinito App

Ora puoi passare un tipo diverso al file Notifica componente e rendere una notifica appropriata che corrisponda al messaggio.

Questo è essenziale per una buona esperienza utente perché gli utenti sono giunti ad associare colori e stili diversi a scenari diversi ed è importante utilizzare tali associazioni in modo coerente. Ad esempio, sarebbe fonte di confusione far sapere a un utente che ha caricato correttamente una foto in una casella di notifica rossa. Potrebbero pensare che il caricamento non sia riuscito, anche se è andato a buon fine.

Aggiunta di interattività al componente di notifica

Hai imparato come utilizzare gli oggetti di scena per creare un componente di notifica personalizzabile. Per andare ancora oltre, puoi aggiungere transizioni a questo componente per renderlo più coinvolgente. Ad esempio, puoi utilizzare le animazioni CSS per far scorrere il componente di notifica sullo schermo e farlo scorrere fuori dopo che è trascorsa una certa durata.