Kuidas luua kohandatud märguandeid rakenduses React, kasutades React-Toastify

Hoiatusteateid kasutatakse sageli veebirakendustes hoiatuste, vigade, eduteadete ja muu väärtusliku teabe kuvamiseks.

Reactis hoiatusteadete koostamiseks on mõned populaarsed paketid ja raamistikud. React-Toastify on Reacti teek, mis võimaldab lisada oma rakendustele teatisi ja hoiatussõnumeid.

React Toastify installimine

Toastify installimiseks oma Reacti projekti käivitage see käsk oma projekti kataloogis:

npm install --save react-toastify

Toastify seadistamine

Toastify paketi kasutamiseks peate importima Toast Container, röstsai meetod ja paketiga kaasas olev CSS-fail.

The Toast Container Rakenduse komponent salvestab kõik loodud röstsaiateated.

importida { ToastContainer, röstsai } alates"reageeri-röstima";
importida"react-toastify/dist/ReactToastify.css";
funktsiooniRakendus() {
tagasi(



 </div>
 );
}

Võite kasutada röstsai meetodid oma Reacti projekti röstsaiateatiste loomiseks:

funktsiooniRakendus() {
konst teatama = () => toost.success("Tere!");
tagasi(


Teavita</button>

 </div>
 );
}

Klõpsates nupul, mille see kood genereerib, helistatakse röstsai.edu meetodil, edastades sellele "Tere!" string. See loob röstsaiateatise, mis kuvab sõnumi ekraanil järgmiselt:

Pange tähele, et saate kutsuda erinevat tüüpi röstsaia meetodeid, näiteks toast.info(), toast.error(), toast.success(), toost.warning(). Kõigil neil meetoditel on teatud peen värvistiil, mis peegeldab sõnumi tüüpi.

Teie röstsaia teatiste paigutamine

Vaikimisi ilmuvad röstsaiateated veebirakenduse ekraani paremas ülanurgas. Saate seda muuta, määrates asukoha atribuudi Toast Container. Saadaval on kuus positsiooniväärtust: üleval paremal, üleval-keskel, üleval-vasakul, all-paremal, all-keskel ja all-vasakul.

Näiteks:

funktsiooniRakendus() {
konst teatama = () => toost.success("Tere!");
tagasi(


Teavita</button>
"üleval vasakul"/>
 </div>
 );
}

Asenditoe seadmine Toast Container vasakus ülanurgas tagab, et kõik röstsaiateated ilmuvad ekraani vasakpoolsest ülaosast.

Saate muuta üksikute röstsaiateatiste vaikeasendit, kasutades asukohaprotsenti röstsai meetodid:

funktsiooniRakendus() {
konst teatama = () => toost.success("Tere!", {positsiooni: röstsai. POSITION.TOP_CENTER});
tagasi(


Teavita</button>
"üleval vasakul"/>
 </div>
 );
}

Saate paigutada ka Toasti märguandeid kasutades CSS-i positsiooni atribuuti, kuid Toastify positsioonirekvisiit on selleks tavaline viis.

Toast Method'i ja ToastContaineri automaatse sulgemise propi käsitsemine

Saate muuta röstsaiateatiste kuvamisaega. Saate juhtida, kui kaua röstsaiateade jääb avatuks, kasutades nuppu automaatne sulgemine prop. Saate muuta kõigi röstsaiateatiste ja individuaalsete röstsaiateatiste viivitusaega. The automaatne sulgemine prop aktsepteerib ainult tõeväärtust false või kestust millisekundites.

Kõigi röstsaiateatiste viivitusaja muutmiseks kasutage nuppu automaatne sulgemine prop sees Toast Container element.

Näiteks:

funktsiooniRakendus() {
konst teatama = () => toost.success("Tere!");
tagasi(


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

Ülaltoodud seadete korral kuvatakse kõik röstsaiateated täpselt viis sekundit (5000 millisekundit).

Kasutades automaatne sulgemine igaühe vara röstsai meetodil saate kohandada üksikute röstsaiateatiste viivitusaega.

Näiteks:

funktsiooniRakendus() {
konst notifyOne = () => toast.info("Suletakse 10 sekundi pärast", {automaatne sulgemine: 10000});
konst notifyTwo = () => toast.info("Suletakse 15 sekundi pärast", {automaatne sulgemine: 15000});
tagasi (


Teata ühele</button>
Teata kaks</button>

 </div>
 );
}

Et vältida röstsaiateatise vaikimisi sulgumist, saate määrata automaatne sulgemine toetada vale. Saate tagada, et kasutaja peab iga röstsaiateatise käsitsi sulgema, määrates automaatne sulgemine prop of the Toast Container valeks.

Näiteks:

funktsiooniRakendus() {
konst teatama = () => toast.info("Tere!");
tagasi (


Teavita</button>
vale} />
 </div>
 );
}

Seadistades automaatne sulgemine üksikisiku rekvisiit röstsai meetodid selleks vale tagab ka selle, et need konkreetsed röstsaiateated ei sulgu vaikimisi.

Stringivabade teatiste renderdamine Toastify abil

Röstsaite märguannetega töötades saate teavitussõnumitena renderdada stringe, reageerida komponentidele ja numbreid. Reacti komponendi renderdamiseks röstsaiateatisena loote komponendi ja renderdate selle kasutades a röstsai meetod.

Näiteks:

funktsiooniSõnum({toastProps, closeToast}) {
tagasi (


Tere tulemast {toastProps.position}</p>
</button>
 </div>
 )
}
eksportidavaikimisi Sõnum;

See koodiplokk loob komponendi, Sõnum. Komponendi renderdamisel märguandina lisab röstsai röstsaiProps ja closeToast rekvisiidid teie komponendile. The closeToast prop on funktsioon, mida saate kasutada teatise sulgemiseks. The röstsaiProps prop on atribuutidega objekt, mis salvestab röstsaiateatise üksikasju, sealhulgas selle asukohta, tüüpi ja muid omadusi.

Importige komponent Sõnum, seejärel edastage see funktsioonile toast(), muutes selle röstsaiateatisena:

importida { ToastContainer, röstsai } alates"reageeri-röstima";
importida"react-toastify/dist/ReactToastify.css";
importida Sõnum alates"./components/Message";
funktsiooniRakendus() {
konst sõnum = () => röstsai (<Sõnum />);
tagasi (


Tere tulemast</button>

 </div>
 );
}

Nupul klõpsates kuvatakse teie ekraanile teade, mis sisaldab küsimust ja kahte nuppu.

Stiilimise röstsaia märguanded

Te ei pea röstsaia märguannete jaoks kasutama vaikestiili. Saate neid kohandada nii, et need sobiksid soovitud kujundusteema või mustriga, mis sobib teie veebirakendusega.

Röstsaa teatise stiiliks esitage see a klassi nimi ja rakendage kohandusi CSS-failis.

Näiteks:

funktsiooniRakendus() {
konst teatama = () => toost.success("Tere!", {klassi nimi: "röstsai sõnum"});
tagasi (


Teavita</button>
"ülemine keskel" />
 </div>
 );
}

Koos klassi nimi teatisele lisatud saate CSS-failis kujundada röstsaiateatise oma eelistuse järgi:

.röstsait-sõnum {
taustavärv: #000000;
värvi: #FFFFFF;
fondi suurus: 20px;
polsterdus: 1rem 0.5rem;
}

Ülaltoodud kohandatud stiili tulemusel näeb teatis välja järgmine:

Teie veebirakenduse röstsaiateated

Nüüd saate Reactis luua kohandatud hoiatusi, kasutades React-Toastify paketti ja selle saadaolevaid meetodeid. Kui kujundate need kohandatud hoiatused/märguanded oma eelistuste järgi, saate oma veebirakenduse kasutuskogemust täiustada.

React-Toastify pakub kiiret ja tõhusat meetodit kohandatud hoiatuste lisamiseks oma Reacti projekti ilma probleemideta.