Kaasavate märguannete loomine Toastriga Reactis

Märguanded on iga veebirakenduse jaoks olulised, kuna need annavad kasutajatele olulist teavet. Teavitussüsteemi nullist ülesehitamise asemel saate kasutada väliseid teeke. Toastr on üks populaarsemaid teeke märguannete loomiseks JavaScripti rakendustes.

Toastri raamatukogu installimine

Kõigepealt looge rakendus React, millega töötate. Sa saad looge Vite abil Reacti rakendus.

Pärast rakenduse loomist installige toostr pakett oma projektis, käivitades terminalis järgmise käsu:

npm install --save toastr

Nüüd olete installinud toostr paketti ja saab seda kasutada teadete kuvamiseks.

Märguannete loomine Toastri abil

Teatiste loomiseks kasutate toostr funktsiooni. The toostr funktsiooni kasutatakse toostiteadete loomiseks ja kuvamiseks. Enne märguannete loomist importige kindlasti oma toostr teavitusstiile oma CSS-failis.

@import'toastr';

Siin on näide selle kohta, kuidas saate luua teatise, kasutades toostr funktsioon:

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;

Selles näites määratlete a teatama funktsiooni. The Klõpsake Mina nupp kutsub teatama funktsiooni, kui sellel klõpsate. The teatama funktsioon kasutab toostr.edu funktsioon eduteate kuvamiseks.

The toostr.edu funktsioon võtab kaks argumenti. Esimene argument on teavitussõnum, mis antud juhul on string "Tore, et olete siin". Teine argument on teatise pealkiri, "Tere tulemast".

Kui klõpsate nupul, kuvatakse järgmise pildiga sarnane teatis Klõpsake Mina nuppu.

Lisaks toostr.edu funktsioon, toostr objekt pakub muid funktsioone teadete loomiseks. Teised funktsioonid on toastr.error, toostr.hoiatusja toastr.info. Iga funktsioon loob teatise erineva taustavärvi ja ikooniga, et saaksite eri tüüpi teatisi hõlpsalt eristada.

Näiteks kui kasutate toastr.error funktsiooni, näeb teie teatis välja järgmine:

Märguannete kohandamine

Erinevalt Toastri teegist ei saa te oma teatisi tavapärase CSS-i abil kohandada React-Toastifyga töötades. Kuid Toastril on teatiste kohandamiseks ka muid võimalusi. Neid valikuid saate kasutada märguannete asukoha, välimuse ja funktsioonide kohandamiseks. Peate andma valikud kolmandale argumendile toostr meetod.

Siin on näide:

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;

Teatise kohandamiseks kasutab see kood sulgemisnupp, edenemisriba, aeg maha, positsioonKlass, näita meetoditja peida meetod valikuobjekti omadused. The sulgemisnupp atribuut määrab, kas teie teatis kuvatakse sulgemisnupuga. See aktsepteerib tõeväärtust.

Kasutades edenemisriba atribuut, saate teatele lisada edenemisriba. Seadistades aeg maha atribuut võimaldab teil juhtida, kui kaua märguannet kuvatakse. See atribuut määrab millisekundite arvu, enne kui märguanne automaatselt kaob.

The positsioonKlass atribuut määrab märguande asukoha teie ekraanil. See aktsepteerib kaheksat eelnevalt määratletud väärtust. Väärtused hõlmavad järgmist:

• röstsai-üleval-paremal: kuvab teatise ekraani paremas ülanurgas.
• röstsai-üleval-vasakul: teade kuvatakse ekraani vasakus ülanurgas.
• toast-top-center: teade kuvatakse ekraani ülaservas keskel.
• röstsai-all-parem: näete teatist ekraani paremas alanurgas.
• röstsai-all-vasakul: teatis asetatakse ekraani vasakusse alumisse nurka.
• röstsaia-põhja-keskus: teatise leiate ekraani allservast keskelt.
• röstsai-top-täislaiusega: teade kuvatakse ekraani ülaosas, täites kogu ekraani laiuse.
• röstsai-põhja-täislaius: teatis täidab kogu ekraani laiuse ja kuvatakse allosas.

Lõpuks, näita meetodit ja peida meetod omadused juhivad teatise kuvamise ja peitmise animatsioone. The näita meetodit atribuut määrab teatise kuvamiseks kasutatava animatsiooni, samas kui peida meetod atribuut määrab teatise peitmiseks kasutatava animatsiooni.

Ülaltoodud koodiplokis määratletud teatis kuvatakse teie ekraani ülaservas keskel koos edenemisriba ja sulgemisnupuga. See kaob kolme sekundi pärast ning selle ilmumiseks ja kadumiseks kasutatakse sisse- ja väljasiirdeid.

See näeb välja umbes selline.

Pange tähele, et saate kohandada iga Toastri teatist ühe suvandite objektiga, selle asemel et neid ükshaaval kohandada. Selleks kasutate toostr.valikud vara. See atribuudiobjekt sisaldab kõigi teie Toastri teatiste kohandamisatribuute.

Näiteks:

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;

See näide näitab, kuidas seadistada kõik teatised nii, et neil oleks edenemisriba, sulgemisnupp ja ekraan paremas ülanurgas sulgege automaatselt 5 sekundi pärast ning kasutage sisse- ja väljapimendamise üleminekuid, et kuvada ja kaduma.

Rakenduse käivitamisel ja nuppudel klõpsamisel kuvatakse liides, mis näeb välja nagu alloleval pildil.

Muutke oma teatised interaktiivseks

Saate muuta oma märguanded köitvamaks, lisades interaktiivsust, näiteks võimalust neil klõpsata. Selleks kasutate onclick vara. The onclick atribuut on üks Toastri raamatukogu pakutavatest kohandamisvõimalustest. See määrab funktsiooni, mis töötab, kui klõpsate teatisel, sarnaselt funktsiooniga klõpsa sündmusel (üks JavaScripti sündmuste kuulajatest).

Siin on näide selle kohta, kuidas kasutada onclick vara:

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;

Ülaltoodud koodiplokis on suvandite objekt toostr.edu funktsioon sisaldab onclick vara. The onclick vara helistab toostr.selge funktsioon, mis kustutab teate ekraanilt.

Looge Toastri abil kaasahaaravaid teatisi

Siit õppisite, kuidas kasutada Toastri teeki oma Reacti rakenduse jaoks köitvate teatiste koostamiseks. Installisite Toastri, seadistasite selle oma rakenduses ning lõite ja kohandasite oma teatised. Toastr on võimas raamatukogu, mis aitab teil luua informatiivseid ja visuaalselt ahvatlevaid teatisi. Lisaks Toastrile saate proovida ka teisi teeke, nagu SweetAlert, React-Toastify või Chakra UI.