Crearea notificărilor captivante cu Toastr în React

Notificările sunt esențiale pentru orice aplicație web, deoarece oferă utilizatorilor informații importante. În loc să construiți sistemul de notificare de la zero, puteți utiliza biblioteci externe. Toastr este una dintre bibliotecile populare pentru crearea de notificări în aplicațiile JavaScript.

Instalarea Bibliotecii Toastr

Mai întâi, începeți prin a crea o aplicație React cu care veți lucra. Puteți creați o aplicație React folosind Vite.

După crearea aplicației, instalați toastr pachet în proiectul dvs. rulând următoarea comandă în terminal:

npm install --save toastr

Acum ați instalat toastr pachet și îl puteți folosi pentru a afișa notificări.

Crearea notificărilor utilizând Toastr

Pentru a crea notificări, veți folosi toastr funcţie. The toastr funcția este utilizată pentru a crea și afișa mesaje toast. Înainte de a vă crea notificările, asigurați-vă că importați toastr stiluri de notificări în fișierul dvs. CSS.

@import'toastr';

Iată un exemplu despre cum creați o notificare folosind toastr funcţie:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

În acest exemplu, definiți a notifica funcţie. The Faceți clic pe Mine butonul apelează notifica funcția când faceți clic pe ea. The notifica funcția folosește toastr.succes funcția pentru a afișa o notificare de succes.

The toastr.succes funcția ia două argumente. Primul argument este mesajul de notificare care, în acest caz, este șirul „Este frumos să te am aici”. Al doilea argument este titlul notificării, "Bine ati venit".

O notificare similară cu imaginea următoare va apărea când faceți clic pe Faceți clic pe Mine buton.

În plus față de toastr.succes funcția, cea toastr obiect oferă alte funcții pentru crearea notificărilor. Celelalte funcții sunt toastr.error, toastr.avertisment, și toastr.info. Fiecare funcție creează o notificare cu o culoare de fundal și o pictogramă diferite, astfel încât să puteți distinge cu ușurință între diferitele tipuri de notificări.

De exemplu, atunci când utilizați toastr.error funcție, notificarea dvs. va arăta astfel:

Personalizarea notificărilor dvs

Cu biblioteca Toastr, nu vă puteți personaliza notificările folosind CSS tradițional, spre deosebire de când lucrați cu React-Toastify. Cu toate acestea, Toastr oferă încă și alte opțiuni pentru personalizarea notificărilor. Puteți folosi aceste opțiuni pentru a personaliza poziția, aspectul și funcționalitatea notificărilor. Trebuie să treceți opțiunile celui de-al treilea argument al toastr metodă.

Iată un exemplu:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Pentru a personaliza notificarea, acest cod folosește closeButton, bara de progres, pauză, positionClass, showMethod, și hideMethod proprietățile obiectului opțiuni. The closeButton proprietatea determină dacă notificarea dvs. se va afișa cu un buton de închidere. Acceptă o valoare booleană.

Folosind bara de progres proprietate, puteți adăuga o bară de progres la notificare. Setarea pauză proprietatea vă permite să controlați cât timp se va afișa o notificare. Această proprietate specifică numărul de milisecunde înainte ca notificarea să dispară automat.

The positionClass proprietate definește poziția notificării pe ecran. Acceptă opt valori predefinite. Valorile includ:

• toast-sus-dreapta: afișează notificarea în colțul din dreapta sus al ecranului.
• toast-sus-stânga: Notificarea se va afișa în colțul din stânga sus al ecranului.
• toast-top-center: Notificarea va apărea în partea centrală sus a ecranului.
• toast-jos-dreapta: veți vedea notificarea în colțul din dreapta jos al ecranului.
• toast-jos-stânga: notificarea este plasată în colțul din stânga jos al ecranului.
• toast-jos-centru: veți găsi notificarea în centrul de jos al ecranului.
• toast-top-toast-width: notificarea apare în partea de sus a ecranului, umplând toată lățimea ecranului.
• toast-bottom-toast-width: Notificarea umple toată lățimea ecranului și este afișată în partea de jos.

În cele din urmă, showMethod și hideMethod proprietățile controlează animațiile pentru afișarea și ascunderea notificării. The showMethod proprietatea specifică animația folosită pentru a afișa o notificare, în timp ce hideMethod proprietatea specifică animația utilizată pentru a ascunde o notificare.

Notificarea definită în blocul de cod de mai sus va apărea în partea de sus a ecranului, cu o bară de progres și un buton de închidere. Acesta va dispărea după trei secunde și va folosi tranzițiile de fade-in și fade-out pentru a apărea și a dispărea.

Va arăta cam așa.

Rețineți că puteți personaliza fiecare notificare Toastr cu un singur obiect de opțiuni în loc să le personalizați pe rând. Pentru a face acest lucru, veți folosi toastr.opţiuni proprietate. Acest obiect de proprietate conține proprietățile de personalizare ale tuturor notificărilor dvs. Toastr.

De exemplu:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Acest exemplu arată cum să configurați toate notificările pentru a avea o bară de progres, un buton de închidere, un afișaj în partea dreaptă sus colțul ecranului, se închide automat după 5 secunde și folosește tranzițiile cu fade-in și fade-out pentru a apărea și dispărea.

Rularea aplicației și clic pe butoane va reda o interfață care ar arăta ca imaginea de mai jos.

Faceți-vă notificările interactive

Puteți face notificările mai captivante adăugând interactivitate, cum ar fi posibilitatea de a face clic pe ele. Pentru a face acest lucru, utilizați onclick proprietate. The onclick proprietatea este una dintre opțiunile de personalizare oferite de biblioteca Toastr. Specifică o funcție care rulează atunci când faceți clic pe notificare, similară cu eveniment clic (unul dintre ascultătorii de evenimente JavaScript).

Iată un exemplu despre cum se utilizează onclick proprietate:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

În blocul de cod de mai sus, obiectul opțiunilor toastr.succes funcția conține o onclick proprietate. The onclick proprietatea numeste toastr.clear funcția, care șterge notificarea de pe ecran.

Creați notificări captivante folosind Toastr

Aici, ați învățat cum să utilizați biblioteca Toastr pentru a crea notificări captivante pentru aplicația dvs. React. Ați instalat Toastr, l-ați configurat în aplicația dvs. și ați creat și personalizat notificările. Toastr este o bibliotecă puternică care vă poate ajuta să creați notificări informative și atractive vizual. În afară de Toastr, puteți încerca și alte biblioteci precum SweetAlert, React-Toastify sau Chakra UI.