Izveidojiet saistošus paziņojumus, izmantojot Toastr programmā React

Paziņojumi ir būtiski jebkurai tīmekļa lietojumprogrammai, jo tie sniedz lietotājiem svarīgu informāciju. Tā vietā, lai izveidotu paziņojumu sistēmu no nulles, varat izmantot ārējās bibliotēkas. Toastr ir viena no populārākajām bibliotēkām paziņojumu izveidei JavaScript lietojumprogrammās.

Toastra bibliotēkas instalēšana

Vispirms sāciet, izveidojot React lietojumprogrammu, ar kuru strādāsit. Jūs varat izveidot React lietojumprogrammu, izmantojot Vite.

Pēc lietojumprogrammas izveides instalējiet toastr pakotni savā projektā, terminālī izpildot šādu komandu:

npm install --save toastr

Tagad esat instalējis toastr pakotni un var to izmantot, lai parādītu paziņojumus.

Paziņojumu izveide, izmantojot Toastr

Lai izveidotu paziņojumus, izmantosit toastr funkciju. The toastr funkcija tiek izmantota, lai izveidotu un parādītu tostu ziņojumus. Pirms paziņojumu izveides noteikti importējiet savus toastr paziņojumu stilus savā CSS failā.

@import'toastr';

Šeit ir piemērs, kā izveidot paziņojumu, izmantojot 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;

Šajā piemērā jūs definējat a paziņot funkciju. The Noklikšķiniet uz Es poga izsauc paziņot funkcija, noklikšķinot uz tās. The paziņot funkcija izmanto grauzdiņš.veiksmi funkcija, lai parādītu paziņojumu par panākumiem.

The grauzdiņš.veiksmi funkcijai nepieciešami divi argumenti. Pirmais arguments ir paziņojuma ziņojums, kas šajā gadījumā ir virkne "Prieks, ka esat šeit". Otrais arguments ir paziņojuma nosaukums, "Laipni lūdzam".

Noklikšķinot uz pogas, tiks parādīts paziņojums, kas līdzīgs šim attēlam Noklikšķiniet uz Es pogu.

Papildus tam grauzdiņš.veiksmi funkcija, toastr objekts nodrošina citas funkcijas paziņojumu veidošanai. Pārējās funkcijas ir toastr.error, grauzdiņš.brīdinājums, un toastr.info. Katra funkcija izveido paziņojumu ar atšķirīgu fona krāsu un ikonu, lai jūs varētu viegli atšķirt dažāda veida paziņojumus.

Piemēram, kad izmantojat toastr.error funkciju, jūsu paziņojums izskatīsies šādi:

Paziņojumu pielāgošana

Izmantojot Toastr bibliotēku, jūs nevarat pielāgot paziņojumus, izmantojot tradicionālo CSS, atšķirībā no strādājot ar React-Toastify. Tomēr Toastr joprojām nodrošina citas paziņojumu pielāgošanas iespējas. Varat izmantot šīs opcijas, lai pielāgotu savu paziņojumu pozīciju, izskatu un funkcionalitāti. Opcijas jānodod trešajam argumentam toastr metodi.

Šeit ir piemērs:

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;

Lai pielāgotu paziņojumu, šis kods izmanto aizvēršanas poga, progressBar, pārtraukums, pozīcijaKlase, parādīt metodi, un slēpšanas metode opciju objekta īpašības. The aizvēršanas poga Īpašums nosaka, vai jūsu paziņojums tiks parādīts ar aizvēršanas pogu. Tas pieņem Būla vērtību.

Izmantojot progressBar rekvizītu, paziņojumam varat pievienot norises joslu. Iestatīšana pārtraukums Īpašums ļauj kontrolēt, cik ilgi paziņojums tiks rādīts. Šis rekvizīts norāda milisekundes, pirms paziņojums automātiski pazūd.

The pozīcijaKlase rekvizīts nosaka paziņojuma pozīciju jūsu ekrānā. Tas pieņem astoņas iepriekš noteiktas vērtības. Vērtībās ietilpst:

• grauzdiņš-augšējā labajā pusē: parāda paziņojumu ekrāna augšējā labajā stūrī.
• grauzdiņš augšā pa kreisi: paziņojums tiks parādīts ekrāna augšējā kreisajā stūrī.
• grauzdiņš-augš-centrs: paziņojums parādīsies ekrāna augšdaļā centrā.
• grauzdiņš-apakšā pa labi: Jūs redzēsit paziņojumu ekrāna apakšējā labajā stūrī.
• grauzdiņš-apakšā-pa kreisi: paziņojums tiek ievietots ekrāna apakšējā kreisajā stūrī.
• grauzdiņš-apakša-centrs: Jūs atradīsiet paziņojumu ekrāna apakšējā centrā.
• grauzdiņš-top-pilnā platumā: paziņojums tiek parādīts ekrāna augšdaļā, aizpildot visu ekrāna platumu.
• grauzdiņš-apakšā-pilnā platumā: paziņojums aizpilda visu ekrāna platumu un tiek parādīts apakšā.

Visbeidzot, parādīt metodi un slēpšanas metode rekvizīti kontrolē animācijas paziņojumu parādīšanai un slēpšanai. The parādīt metodi rekvizīts norāda animāciju, kas tiek izmantota, lai parādītu paziņojumu, savukārt slēpšanas metode rekvizīts norāda animāciju, kas tiek izmantota, lai paslēptu paziņojumu.

Iepriekš esošajā koda blokā definētais paziņojums tiks parādīts ekrāna augšējā centrā ar norises joslu un aizvēršanas pogu. Tas pazudīs pēc trim sekundēm, un, lai parādītos un pazustu, tiks izmantotas izgaismošanas un izzušanas pārejas.

Tas izskatīsies apmēram šādi.

Ņemiet vērā, ka varat pielāgot katru Toastr paziņojumu ar vienu opciju objektu, nevis pielāgot tos pa vienam. Lai to izdarītu, izmantosit grauzdiņš.opcijas īpašums. Šis īpašuma objekts satur visu jūsu Toastr paziņojumu pielāgošanas rekvizītus.

Piemēram:

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;

Šis piemērs parāda, kā konfigurēt visus paziņojumus, lai tiem būtu progresa josla, aizvēršanas poga un displejs augšējā labajā stūrī. ekrāna stūrī, automātiski aizveriet pēc 5 sekundēm un izmantojiet izgaismošanas un izzušanas pārejas, lai parādītos un pazust.

Palaižot lietojumprogrammu un noklikšķinot uz pogām, tiks parādīts interfeiss, kas izskatās kā zemāk redzamajā attēlā.

Padariet savus paziņojumus interaktīvus

Varat padarīt paziņojumus saistošākus, pievienojot interaktivitāti, piemēram, iespēju noklikšķināt uz tiem. Lai to izdarītu, izmantojiet onclick īpašums. The onclick īpašums ir viena no pielāgošanas iespējām, ko nodrošina Toastr bibliotēka. Tas norāda funkciju, kas darbojas, kad noklikšķināt uz paziņojuma, līdzīgi kā noklikšķiniet uz notikuma (viens no JavaScript notikumu klausītājiem).

Šeit ir piemērs, kā izmantot onclick īpašums:

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;

Iepriekš esošajā koda blokā opciju objekts grauzdiņš.veiksmi funkcija satur an onclick īpašums. The onclick īpašums zvana grauzdiņš.skaidrs funkcija, kas notīra paziņojumu no ekrāna.

Izveidojiet saistošus paziņojumus, izmantojot Toastr

Šeit jūs uzzinājāt, kā izmantot Toastr bibliotēku, lai izveidotu saistošus paziņojumus savai React lietojumprogrammai. Jūs instalējāt Toastr, iestatījāt to savā lietotnē un izveidojāt un pielāgojāt savus paziņojumus. Toastr ir jaudīga bibliotēka, kas var palīdzēt izveidot informatīvus un vizuāli pievilcīgus paziņojumus. Papildus Toastr varat izmēģināt arī citas bibliotēkas, piemēram, SweetAlert, React-Toastify vai Chakra UI.