Kā izveidot pielāgotus brīdinājumus programmā React, izmantojot React-Toastify

Brīdinājumu ziņojumi bieži tiek izmantoti tīmekļa lietotnēs, lai parādītu brīdinājumus, kļūdas, panākumu ziņojumus un citu vērtīgu informāciju.

Ir dažas populāras pakotnes un ietvari, lai izveidotu brīdinājuma ziņojumus programmā React. React-Toastify ir React bibliotēka, kas ļauj lietojumprogrammām pievienot paziņojumus un brīdinājuma ziņojumus.

React Toastify instalēšana

Lai savā React projektā instalētu Toastify, projekta direktorijā palaidiet šo komandu:

npm install --save react-toastify

Toastify iestatīšana

Lai izmantotu Toastify pakotni, jums būs jāimportē ToastContainer, grauzdiņš metodi un pavadošo CSS failu, ko nodrošina pakotne.

The ToastContainer Lietotnes komponentā tiek glabāti visi izveidotie grauzdiņu paziņojumi.

imports { ToastContainer, toast } no"reaģēt, grauzdēt";
imports"react-toastify/dist/ReactToastify.css";
funkcijuApp() {
atgriezties(



 </div>
 );
}

Jūs varat izmantot grauzdiņš metodes, lai izveidotu tostu paziņojumus savam React projektam:

funkcijuApp() {
konst paziņot = () => grauzdiņš.veiksmi("Sveiki!");
atgriezties(


Paziņot</button>

 </div>
 );
}

Noklikšķinot uz pogas, ko šis kods ģenerē, tiks izsaukts grauzdiņš.veiksmi metodi, nododot tai "Sveiki!" stīga. Tiks izveidots paziņojums par grauzdiņiem, kas ekrānā parāda ziņojumu, piemēram:

Ņemiet vērā, ka varat izsaukt dažādu veidu grauzdēšanas metodes, piemēram, toast.info(), toast.error(), grauzdiņš.veiksmi(), grauzdiņš.brīdinājums(). Katrai no šīm metodēm ir smalks krāsu stils, kas atspoguļo ziņojuma veidu.

Toast paziņojumu izvietošana

Pēc noklusējuma tīmekļa lietotnes ekrāna augšējā labajā pusē tiek parādīti paziņojumi par grauzdiņiem. Varat to mainīt, iestatot pozīcijas rekvizītu ToastContainer. Ir pieejamas sešas pozīcijas vērtības: augšā pa labi, augšā centrā, augšā pa kreisi, apakšā pa labi, apakšā centrā un apakšā pa kreisi.

Piemēram:

funkcijuApp() {
konst paziņot = () => grauzdiņš.veiksmi("Sveiki!");
atgriezties(


Paziņot</button>
"augšējais kreisais"/>
 </div>
 );
}

Pozīcijas atbalsta iestatīšana uz ToastContainer augšējā kreisajā stūrī nodrošina, ka visi grauzdiņu paziņojumi tiek parādīti ekrāna augšējā kreisajā pusē.

Varat mainīt atsevišķu tostu paziņojumu noklusējuma pozīciju, izmantojot pozīcijas norādes grauzdiņš metodes:

funkcijuApp() {
konst paziņot = () => grauzdiņš.veiksmi("Sveiki!", {pozīciju: grauzdiņš. POSITION.TOP_CENTER});
atgriezties(


Paziņot</button>
"augšējais kreisais"/>
 </div>
 );
}

Varat arī novietot Toast paziņojumus izmantojot CSS pozīcijas rekvizītu, taču Toastify pozīcija ir standarta veids, kā to izdarīt.

Toast Method un ToastContainer automātiskās aizvēršanas atbalsta izmantošana

Varat mainīt tostu paziņojumu rādīšanas laiku. Varat kontrolēt, cik ilgi paziņojums par grauzdiņiem paliek atvērts, izmantojot autoClose prop. Varat mainīt visu tostu paziņojumu un atsevišķu tostu paziņojumu aizkaves laiku. The autoClose prop pieņem tikai Būla vērtību false vai ilgumu milisekundēs.

Lai mainītu visu tostu paziņojumu aizkaves laiku, izmantojiet autoClose balsts iekšpusē ToastContainer elements.

Piemēram:

funkcijuApp() {
konst paziņot = () => grauzdiņš.veiksmi("Sveiki!");
atgriezties(


Paziņot</button>
5000}/>
 </div>
 );
}

Izmantojot iepriekš minētos iestatījumus, visi paziņojumi par grauzdiņiem tiks rādīti tieši piecas sekundes (5000 milisekundes).

Izmantojot autoClose katra īpašums grauzdiņš metodi, varat pielāgot atsevišķu grauzdiņu paziņojumu aizkaves laiku.

Piemēram:

funkcijuApp() {
konst notifyOne = () => toast.info("Aizvērties pēc 10 sekundēm", {autoClose: 10000});
konst notifyTwo = () => toast.info("Aizvērties pēc 15 sekundēm", {autoClose: 15000});
atgriezties (


Paziņot vienam</button>
Paziņot diviem</button>

 </div>
 );
}

Lai pēc noklusējuma netiktu aizvērts grauzdēšanas paziņojums, varat iestatīt autoClose prop to viltus. Varat nodrošināt, ka lietotājam ir manuāli jāaizver katrs paziņojums par grauzdiņiem, iestatot autoClose rekvizīti ToastContainer uz nepatiesu.

Piemēram:

funkcijuApp() {
konst paziņot = () => toast.info("Sveiki!");
atgriezties (


Paziņot</button>
viltus} />
 </div>
 );
}

Iestatīšana autoClose indivīda rekvizīts grauzdiņš metodes, lai viltus nodrošinās arī to, ka šie konkrētie grauzdiņu paziņojumi netiek aizvērti pēc noklusējuma.

Paziņojumu, kas nav virknes, renderēšana, izmantojot Toastify

Strādājot ar tostu paziņojumiem, varat renderēt virknes, reaģēt uz komponentiem un skaitļiem kā paziņojumu ziņojumus. Lai atveidotu React komponentu kā grauzdiņa paziņojumu, izveidojiet komponentu un atveidojiet to, izmantojot a grauzdiņš metodi.

Piemēram:

funkcijuZiņojums({toastProps, closeToast}) {
atgriezties (


Laipni lūdzam {toastProps.position}</p>
</button>
 </div>
 )
}
eksportētnoklusējuma Ziņa;

Šis koda bloks izveido komponentu, Ziņojums. Renderējot komponentu kā paziņojumu, tiek pievienots grauzdiņš grauzdiņšProps un closeToast rekvizīti jūsu komponentam. The closeToast prop ir funkcija, ko varat izmantot, lai aizvērtu paziņojumu. The grauzdiņšProps prop ir objekts ar rekvizītiem, kas glabā informāciju par grauzdiņa paziņojumu, tostarp tā atrašanās vietu, veidu un citus raksturlielumus.

Importējiet komponentu Ziņojums, pēc tam nosūtiet to toast() funkcijai, padarot to kā grauzdiņa paziņojumu:

imports { ToastContainer, toast } no"reaģēt, grauzdēt";
imports"react-toastify/dist/ReactToastify.css";
imports Ziņojums no"./components/Message";
funkcijuApp() {
konst ziņa = () => grauzdiņš (<Ziņojums />);
atgriezties (


Laipni lūdzam</button>

 </div>
 );
}

Noklikšķinot uz pogas, ekrānā tiks parādīts paziņojums ar jautājumu un divām pogām.

Paziņojumi par grauzdiņu veidošanu

Tostu paziņojumiem nav jāizmanto noklusējuma stils. Varat tos pielāgot, lai tie atbilstu vēlamajam dizaina motīvam vai modelim, kas piemērots jūsu tīmekļa lietojumprogrammai.

Lai pielāgotu grauzdiņa paziņojuma stilu, sniedziet tam a klasesNosaukums un piemērot pielāgojumus CSS failā.

Piemēram:

funkcijuApp() {
konst paziņot = () => grauzdiņš.veiksmi("Sveiki!", {klasesNosaukums: "grauzdiņš-ziņa"});
atgriezties (


Paziņot</button>
"augšējais centrs" />
 </div>
 );
}

Ar klasesNosaukums pievienojot savam paziņojumam, CSS failā varat veidot tostu paziņojumu atbilstoši savām vēlmēm:

.tosts-ziņa {
fona krāsa: #000000;
krāsa: #FFFFFF;
fonta izmērs: 20px;
polsterējums: 1rem 0.5rem;
}

Iepriekš minētā pielāgotā stila rezultātā paziņojums izskatīsies šādi:

Tostu paziņojumi jūsu tīmekļa lietojumprogrammai

Tagad programmā React varat izveidot pielāgotus brīdinājumus, izmantojot React-Toastify pakotni un tās pieejamās metodes. Veidojot šos pielāgotos brīdinājumus/paziņojumus pēc savas izvēles, varat uzlabot savas tīmekļa lietojumprogrammas lietošanas pieredzi.

React-Toastify piedāvā ātru un efektīvu metodi pielāgotu brīdinājumu iekļaušanai React projektā bez satraukuma.