Kako ustvariti opozorila po meri v Reactu z uporabo React-Toastify

Opozorilna sporočila se pogosto uporabljajo v spletnih aplikacijah za prikaz opozoril, napak, sporočil o uspehu in drugih dragocenih informacij.

Obstaja nekaj priljubljenih paketov in ogrodij za ustvarjanje opozorilnih sporočil v Reactu. React-Toastify je knjižnica React, ki vam omogoča dodajanje obvestil in opozorilnih sporočil vašim aplikacijam.

Namestitev React Toastify

Če želite namestiti Toastify v svoj projekt React, zaženite ta ukaz v imeniku vašega projekta:

npm install --save react-toastify

Nastavitev Toastify

Če želite uporabljati paket Toastify, boste morali uvoziti ToastContainer, toast metodo in spremljajočo datoteko CSS, ki jo zagotavlja paket.

The ToastContainer znotraj komponente aplikacije shrani vsa ustvarjena obvestila o zdravici.

uvoz {ToastContainer, toast} od"reagiraj-nazdravi";
uvoz'react-toastify/dist/ReactToastify.css';
funkcijoaplikacija() {
vrnitev(



 </div>
 );
}

Lahko uporabite toast metode za ustvarjanje obvestil o zdravici za vaš projekt React:

funkcijoaplikacija() {
konst obvesti = () => toast.uspeh("Pozdravljeni!");
vrnitev(


Obvesti</button>

 </div>
 );
}

S klikom na gumb, ki ga ustvari ta koda, se bo poklical toast.uspeh metoda, ki ji posreduje "Pozdravljeni!" vrvica. To bo ustvarilo obvestilo o zdravici, ki prikaže sporočilo na zaslonu, kot je ta:

Upoštevajte, da lahko pokličete različne vrste metod toast, kot npr toast.info(), toast.error(), toast.success(), toast.warning(). Vsaka od teh metod ima nekaj subtilnega barvnega sloga, ki odraža vrsto sporočila.

Pozicioniranje vaših obvestil Toast

Obvestila o zdravici se privzeto prikažejo v zgornjem desnem kotu zaslona spletne aplikacije. To lahko spremenite tako, da nastavite lastnost položaja na ToastContainer. Na voljo je šest vrednosti položaja: zgoraj desno, zgoraj na sredini, zgoraj levo, spodaj desno, spodaj na sredini in spodaj levo.

Na primer:

funkcijoaplikacija() {
konst obvesti = () => toast.uspeh("Pozdravljeni!");
vrnitev(


Obvesti</button>
"zgoraj levo"/>
 </div>
 );
}

Nastavitev položaja opornika na ToastContainer v zgornjem levem kotu zagotavlja, da se vsa obvestila o zdravici prikažejo v zgornjem levem kotu zaslona.

Privzeti položaj za posamezna obvestila o zdravici lahko spremenite tako, da uporabite element položaja toast metode:

funkcijoaplikacija() {
konst obvesti = () => toast.uspeh("Pozdravljeni!", {položaj: toast. POSITION.TOP_CENTER});
vrnitev(


Obvesti</button>
"zgoraj levo"/>
 </div>
 );
}

Prav tako lahko postavite obvestila Toast z uporabo lastnosti položaja CSS, vendar je Toastifyjev položaj standardni način za to.

Ravnanje s podlago za samodejno zapiranje metode Toast in ToastContainer

Čas prikaza obvestil o zdravici lahko spremenite. Kako dolgo ostane obvestilo o zdravici odprto, lahko nadzirate z uporabo autoClose prop. Spremenite lahko čas zakasnitve za vsa obvestila o zdravici in posamezna obvestila o zdravici. The autoClose prop sprejme le logično vrednost false ali trajanje v milisekundah.

Če želite spremeniti čas zakasnitve za vsa obvestila o zdravici, uporabite autoClose prop znotraj ToastContainer element.

Na primer:

funkcijoaplikacija() {
konst obvesti = () => toast.uspeh("Pozdravljeni!");
vrnitev(


Obvesti</button>
5000}/>
 </div>
 );
}

Z zgornjimi nastavitvami bodo vsa obvestila o zdravici prikazana natanko pet sekund (5000 milisekund).

Uporabljati autoClose lastnina vsakega toast način, lahko prilagodite čas zakasnitve za posamezna obvestila o zdravici.

Na primer:

funkcijoaplikacija() {
konst notifyOne = () => toast.info("Zaprlo se bo v 10 sekundah", {autoClose: 10000});
konst notifyTwo = () => toast.info("Zaprlo se bo v 15 sekundah", {autoClose: 15000});
vrnitev (


Obvesti enega</button>
Obvesti dva</button>

 </div>
 );
}

Če želite preprečiti, da bi se obvestilo o zdravici privzeto zaprlo, lahko nastavite autoClose podpirati lažno. Z nastavitvijo lahko zagotovite, da mora uporabnik ročno zapreti vsako obvestilo o zdravici autoClose rekvizit za ToastContainer na napačno.

Na primer:

funkcijoaplikacija() {
konst obvesti = () => toast.info("Pozdravljeni!");
vrnitev (


Obvesti</button>
lažno} />
 </div>
 );
}

Nastavitev autoClose rekvizit posameznika toast metode za lažno bo prav tako zagotovilo, da se ta posebna obvestila o zdravici privzeto ne zaprejo.

Upodabljanje obvestil brez nizov s Toastifyjem

Pri delu z obvestili o zdravici lahko upodobite nize, komponente reakcij in številke kot obvestila. Če želite upodobiti komponento React kot obvestilo o zdravici, ustvarite komponento in jo upodobite z uporabo a toast metoda.

Na primer:

funkcijoSporočilo({toastProps, closeToast}) {
vrnitev (


Dobrodošli {toastProps.position}</p>
</button>
 </div>
 )
}
izvozprivzeto sporočilo;

Ta blok kode ustvari komponento, Sporočilo. Ko upodablja komponento kot obvestilo, toast doda toastProps in closeToast rekviziti za vašo komponento. The closeToast prop je funkcija, s katero lahko zaprete obvestilo. The toastProps prop je objekt z lastnostmi, ki shranjujejo podrobnosti o obvestilu o zdravici, vključno z njegovim položajem, vrsto in drugimi značilnostmi.

Uvozite komponento sporočila, nato jo posredujte funkciji toast() in jo upodobite kot obvestilo o zdravici:

uvoz {ToastContainer, toast} od"reagiraj-nazdravi";
uvoz'react-toastify/dist/ReactToastify.css';
uvoz Sporočilo od"./components/Message";
funkcijoaplikacija() {
konst sporočilo = () => toast (<Sporočilo />);
vrnitev (


Dobrodošli</button>

 </div>
 );
}

S klikom na gumb se na zaslonu prikaže obvestilo z vprašanjem in dvema gumboma.

Styling Toast Notifications

Za obvestila o zdravici vam ni treba uporabiti privzetega sloga. Prilagodite jih lahko tako, da se prilegajo želeni temi oblikovanja ali vzorcu, ki ustreza vaši spletni aplikaciji.

Če želite oblikovati obvestilo o zdravici, mu dajte a className in uporabite prilagoditve znotraj datoteke CSS.

Na primer:

funkcijoaplikacija() {
konst obvesti = () => toast.uspeh("Pozdravljeni!", {className: "toast-sporočilo"});
vrnitev (


Obvesti</button>
"zgoraj na sredini" />
 </div>
 );
}

z className priloženo vašemu obvestilu, lahko oblikujete obvestilo o zdravici po svojih željah znotraj datoteke CSS:

.toast-sporočilo {
Barva ozadja: #000000;
barva: #FFFFFF;
velikost pisave: 20px;
oblazinjenje: 1rem 0.5rem;
}

Zaradi zgornjega oblikovanja po meri bo obvestilo videti takole:

Toast obvestila za vašo spletno aplikacijo

Zdaj lahko ustvarite opozorila po meri v Reactu z uporabo paketa React-Toastify in njegovih razpoložljivih metod. Če ta opozorila/obvestila po meri oblikujete po svojih željah, lahko izboljšate uporabniško izkušnjo vaše spletne aplikacije.

React-Toastify ponuja hitro in učinkovito metodo za vključitev opozoril po meri v vaš projekt React brez napora.