Kurkite patrauklius pranešimus naudodami „Toastr“ sistemoje „React“.

Pranešimai yra būtini bet kuriai žiniatinklio programai, nes jie suteikia vartotojams svarbios informacijos. Užuot kurę pranešimų sistemą nuo nulio, galite naudoti išorines bibliotekas. „Toastr“ yra viena iš populiariausių bibliotekų, skirtų pranešimams „JavaScript“ programose kurti.

Toastro bibliotekos įdiegimas

Pirmiausia sukurkite „React“ programą, su kuria dirbsite. Tu gali sukurkite React programą naudodami Vite.

Sukūrę programą, įdiekite toastr paketą savo projekte vykdydami šią komandą savo terminale:

npm install --save toastr

Dabar jūs įdiegėte toastr paketą ir gali naudoti jį pranešimams rodyti.

Pranešimų kūrimas naudojant Toastr

Norėdami sukurti pranešimus, naudosite toastr funkcija. The toastr funkcija naudojama tostų pranešimams kurti ir rodyti. Prieš kurdami pranešimus įsitikinkite, kad importavote toastr pranešimų stilius savo CSS faile.

@import'toastr';

Štai pavyzdys, kaip sukurti pranešimą naudodami toastr funkcija:

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;

Šiame pavyzdyje jūs apibrėžiate a pranešti funkcija. The Paspausk mane mygtukas iškviečia pranešti funkcija, kai ją spustelėsite. The pranešti funkcija naudoja toastr.sėkmė funkcija, kad būtų rodomas pranešimas apie sėkmę.

The toastr.sėkmė funkcijai reikia dviejų argumentų. Pirmasis argumentas yra pranešimo pranešimas, kuris šiuo atveju yra eilutė "Smagu, kad tu čia". Antrasis argumentas yra pranešimo pavadinimas, "Sveiki".

Spustelėjus, pasirodys pranešimas, panašus į šį paveikslėlį Paspausk mane mygtuką.

Be to, toastr.sėkmė funkcija, toastr Objektas teikia kitas pranešimų kūrimo funkcijas. Kitos funkcijos yra toastr.klaida, skrudinta duona.perspėjimas, ir toastr.info. Kiekviena funkcija sukuria pranešimą su skirtinga fono spalva ir piktograma, todėl galite lengvai atskirti skirtingus pranešimų tipus.

Pavyzdžiui, kai naudojate toastr.klaida funkcija, jūsų pranešimas atrodys taip:

Pranešimų tinkinimas

Naudodami Toastr biblioteką negalite tinkinti pranešimų naudodami tradicinį CSS, kitaip nei dirbant su React-Toastify. Tačiau „Toastr“ vis tiek teikia kitų pranešimų tinkinimo parinkčių. Šias parinktis galite naudoti norėdami tinkinti pranešimų padėtį, išvaizdą ir funkcijas. Turite perduoti parinktis trečiajam argumentui toastr metodas.

Štai pavyzdys:

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;

Norėdami tinkinti pranešimą, šis kodas naudoja Uždaryti mygtuką, progreso juosta, laikas baigėsi, pozicijaKlasė, parodyti metodą, ir slėpimo metodas parinkčių objekto savybės. The Uždaryti mygtuką ypatybė nustato, ar pranešimas bus rodomas su uždarymo mygtuku. Jis priima loginę reikšmę.

Naudojant progreso juosta ypatybę, prie pranešimo galite pridėti eigos juostą. Nustatant laikas baigėsi ypatybė leidžia valdyti, kiek laiko bus rodomas pranešimas. Ši savybė nurodo milisekundžių skaičių, iki kurio pranešimas automatiškai išnyks.

The pozicijaKlasė ypatybė apibrėžia pranešimo vietą ekrane. Jis priima aštuonias iš anksto nustatytas reikšmes. Vertės apima:

• skrudinta duona viršuje dešinėje: rodomas pranešimas viršutiniame dešiniajame ekrano kampe.
• skrudinta duona viršuje kairėje: pranešimas bus rodomas viršutiniame kairiajame ekrano kampe.
• skrudinta duona – viršuje – centre: pranešimas bus rodomas viršutiniame ekrano centre.
• skrudinta duona - apačioje - dešinėje: Apatiniame dešiniajame ekrano kampe matysite pranešimą.
• skrudinta duona - apačioje - kairėje: pranešimas pateikiamas apatiniame kairiajame ekrano kampe.
• skrudinta duona-dugnas-centras: Pranešimą rasite apatiniame ekrano centre.
• tostas-top-viso pločio: pranešimas rodomas ekrano viršuje, užpildantis visą ekrano plotį.
• skrebučiai-dugnas-viso pločio: pranešimas užpildo visą ekrano plotį ir rodomas apačioje.

Galiausiai, parodyti metodą ir slėpimo metodas ypatybės valdo pranešimo rodymo ir slėpimo animacijas. The parodyti metodą ypatybė nurodo animaciją, naudojamą pranešimui rodyti, o slėpimo metodas ypatybė nurodo animaciją, naudojamą pranešimui paslėpti.

Aukščiau esančiame kodo bloke nurodytas pranešimas bus rodomas viršutiniame ekrano centre su eigos juosta ir uždarymo mygtuku. Jis išnyks po trijų sekundžių ir naudos išnykimo ir išnykimo perėjimus, kad atsirastų ir išnyktų.

Tai atrodys maždaug taip.

Atminkite, kad galite tinkinti kiekvieną Toastr pranešimą naudodami vieną parinkčių objektą, o ne tinkinti juos po vieną. Norėdami tai padaryti, naudosite skrudinta duona.parinktys nuosavybė. Šiame nuosavybės objekte yra visų jūsų Toastr pranešimų tinkinimo ypatybės.

Pavyzdžiui:

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;

Šiame pavyzdyje parodyta, kaip sukonfigūruoti visus pranešimus, kad jie turėtų eigos juostą, uždarymo mygtuką ir ekraną viršutiniame dešiniajame kampe ekrano kampe, automatiškai užsidarykite po 5 sekundžių ir naudokite išnykimo ir išnykimo perėjimus, kad būtų rodomas ir išnykti.

Paleidus programą ir spustelėjus mygtukus, bus rodoma sąsaja, kuri atrodytų kaip toliau pateiktame paveikslėlyje.

Padarykite savo pranešimus interaktyvius

Galite padaryti pranešimus patrauklesnius pridėdami interaktyvumo, pvz., galimybę juos spustelėti. Norėdami tai padaryti, naudokite paspaudus nuosavybė. The paspaudus nuosavybė yra viena iš tinkinimo parinkčių, kurias teikia Toastr biblioteka. Jame nurodoma funkcija, kuri paleidžiama spustelėjus pranešimą, panaši į spustelėkite įvykį (vienas iš „JavaScript“ įvykių klausytojų).

Čia yra pavyzdys, kaip naudoti paspaudus nuosavybė:

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;

Aukščiau esančiame kodo bloke parinkčių objektas toastr.sėkmė funkcijoje yra an paspaudus nuosavybė. The paspaudus nuosavybė vadina toastr.aišku funkcija, kuri išvalo pranešimą iš ekrano.

Sukurkite patrauklius pranešimus naudodami Toastr

Čia sužinojote, kaip naudoti „Toastr“ biblioteką įtraukiant „React“ programos pranešimus. Įdiegėte „Toastr“, nustatėte ją programoje ir sukūrėte bei tinkinote pranešimus. Toastr yra galinga biblioteka, kuri gali padėti sukurti informatyvius ir vizualiai patrauklius pranešimus. Be Toastr, taip pat galite išbandyti kitas bibliotekas, tokias kaip SweetAlert, React-Toastify arba Chakra UI.