Cum se creează alerte personalizate în React folosind React-Toastify

Mesajele de alertă sunt adesea folosite în aplicațiile web pentru a afișa avertismente, erori, mesaje de succes și alte informații valoroase.

Există câteva pachete și cadre populare pentru a crea mesaje de alertă în React. React-Toastify este o bibliotecă React care vă permite să adăugați notificări și mesaje de alertă în aplicațiile dvs.

Instalarea React Toastify

Pentru a instala Toastify în proiectul dvs. React, rulați această comandă în directorul de proiect:

npm install --save react-toastify

Configurarea Toastify

Pentru a utiliza pachetul Toastify, va trebui să importați Toast Container, paine prajita metoda și fișierul CSS însoțitor furnizat de pachet.

The Toast Container în interiorul componentei App stochează toate notificările toast create.

import { ToastContainer, toast } din"reacționează-toastify";
import„react-toastify/dist/ReactToastify.css”;
funcţieApp() {
întoarcere(



 </div>
 );
}

Puteți folosi paine prajita metode de a crea notificări toast pentru proiectul dvs. React:

funcţieApp() {
const notifica = () => toast.succes("Salutare!");
întoarcere(


Notifică </button>

 </div>
 );
}

Făcând clic pe butonul generat de acest cod, se va apela toast.succes metoda, trecându-i „Bună ziua!” şir. Aceasta va crea o notificare toast care afișează mesajul pe ecran, astfel:

Rețineți că există diferite tipuri de metode de toast pe care le puteți apela, cum ar fi toast.info(), toast.error(), toast.succes(), toast.warning(). Fiecare dintre aceste metode are un stil subtil de culoare pentru a reflecta tipul de mesaj.

Poziționarea notificărilor pentru toast

În mod implicit, notificările toast apar din partea dreaptă sus a ecranului aplicației web. Puteți modifica acest lucru setând proprietatea poziției pe Toast Container. Există șase valori de poziție disponibile: sus-dreapta, sus-centru, sus-stânga, jos-dreapta, jos-centru și jos-stânga.

De exemplu:

funcţieApp() {
const notifica = () => toast.succes("Salutare!");
întoarcere(


Notifică </button>
"stânga sus"/>
 </div>
 );
}

Setarea poziției prop pe Toast Container în stânga sus se asigură că toate notificările toast apar din partea stângă sus a ecranului.

Puteți schimba poziția implicită pentru notificările individuale de pâine prăjită utilizând elementul de sprijin de poziție al paine prajita metode:

funcţieApp() {
const notifica = () => toast.succes("Salutare!", {poziţie: paine prajita. POSITION.TOP_CENTER});
întoarcere(


Notifică </button>
"stânga sus"/>
 </div>
 );
}

De asemenea, puteți poziționa notificările Toast folosind proprietatea de poziție CSS, dar suportul de poziție al lui Toastify este modalitatea standard de a face acest lucru.

Gestionarea autoClose Prop a metodei Toast și ToastContainer

Puteți modifica timpul de afișare a notificărilor de toast. Puteți controla cât de mult rămâne deschisă o notificare toast folosind închidere automată recuzită. Puteți modifica timpul de întârziere pentru toate notificările de toast și notificările de toast specifice individuale. The închidere automată prop acceptă doar valoarea booleană false sau o durată în milisecunde.

Pentru a modifica timpul de întârziere pentru toate notificările toast, utilizați închidere automată prop în interiorul Toast Container element.

De exemplu:

funcţieApp() {
const notifica = () => toast.succes("Salutare!");
întoarcere(


Notifică </button>
5000}/>
 </div>
 );
}

Cu setările de mai sus, toate notificările toast se vor afișa pentru exact cinci secunde (5.000 de milisecunde).

Folosind închidere automată proprietatea fiecaruia paine prajita metoda, puteți personaliza timpul de întârziere pentru notificările individuale de toast.

De exemplu:

funcţieApp() {
const notifyOne = () => toast.info(„Se va închide în 10 secunde”, {închidere automată: 10000});
const notifyTwo = () => toast.info(„Se va închide în 15 secunde”, {închidere automată: 15000});
întoarcere (


Anunță One</button>
Notifică doi</button>

 </div>
 );
}

Pentru a preveni închiderea implicită a notificării toast, puteți seta închidere automată prop la fals. Vă puteți asigura că utilizatorul trebuie să închidă manual fiecare notificare de toast prin setarea închidere automată prop de la Toast Container la fals.

De exemplu:

funcţieApp() {
const notifica = () => toast.info("Salutare!");
întoarcere (


Notifică </button>
fals} />
 </div>
 );
}

Setarea închidere automată prop de individ paine prajita metode de a fals se va asigura, de asemenea, că acele notificări specifice toast nu se închid în mod implicit.

Redarea notificărilor fără șir cu Toastify

Puteți reda șiruri, componente de reacție și numere ca mesaje de notificare atunci când lucrați cu notificări toast. Pentru a reda o componentă React ca notificare toast, creați componenta și redați-o folosind a paine prajita metodă.

De exemplu:

funcţieMesaj({toastProps, closeToast}) {
întoarcere (


Bun venit {toastProps.position}</p>
</button>
 </div>
 )
}
exportMod implicit Mesaj;

Acest bloc de cod creează o componentă, Mesaj. Când redați o componentă ca notificare, toast adaugă toastProps și closeToast recuzită la componenta dvs. The closeToast prop este o funcție pe care o puteți folosi pentru a închide notificarea. The toastProps prop este un obiect cu proprietăți care stochează detalii despre notificarea toast, inclusiv poziția, tipul și alte caracteristici ale acesteia.

Importați componenta Mesaj, apoi treceți-o la funcția toast(), redând-o ca notificare toast:

import { ToastContainer, toast } din"reacționează-toastify";
import„react-toastify/dist/ReactToastify.css”;
import Mesaj din„./components/Message”;
funcţieApp() {
const msg = () => paine prajita(<Mesaj />);
întoarcere (


Bun venit</button>

 </div>
 );
}

Făcând clic pe buton, va fi afișată pe ecran o notificare care conține o întrebare și două butoane.

Notificări de stiling Toast

Nu trebuie să utilizați stilul implicit pentru notificările de toast. Le puteți personaliza pentru a se potrivi cu o temă de design sau un model dorit, potrivit pentru aplicația dvs. web.

Pentru a stila notificarea de toast, dă-i a numele clasei și aplicați personalizările într-un fișier CSS.

De exemplu:

funcţieApp() {
const notifica = () => toast.succes("Salutare!", {numele clasei: „mesaj-toast”});
întoarcere (


Notifică </button>
"centru sus" />
 </div>
 );
}

Cu numele clasei atașată la notificarea dvs., puteți modela notificarea toast după preferințele dvs. în fișierul CSS:

.toast-mesaj {
culoare de fundal: #000000;
culoare: #FFFFFF;
marimea fontului: 20px;
căptușeală: 1rem 0.5rem;
}

Ca rezultat al stilului personalizat de mai sus, notificarea va arăta astfel:

Notificări Toast pentru aplicația dvs. web

Acum puteți crea alerte personalizate în React folosind pachetul React-Toastify și metodele sale disponibile. Prin stilul acestor alerte/notificări personalizate după preferințele dvs., puteți îmbunătăți experiența utilizatorului aplicației dvs. web.

React-Toastify oferă o metodă rapidă și eficientă pentru includerea alertelor personalizate în proiectul dvs. React fără probleme.