Rakenna kiinnostavia ilmoituksia Toastrin kanssa Reactissa

Ilmoitukset ovat välttämättömiä kaikille verkkosovelluksille, koska ne tarjoavat käyttäjille tärkeitä tietoja. Sen sijaan, että rakennat ilmoitusjärjestelmää tyhjästä, voit käyttää ulkoisia kirjastoja. Toastr on yksi suosituimmista kirjastoista ilmoitusten luomiseen JavaScript-sovelluksissa.

Toast-kirjaston asentaminen

Aloita luomalla React-sovellus, jonka kanssa työskentelet. Sinä pystyt Luo React-sovellus Viten avulla.

Kun olet luonut sovelluksen, asenna toastr paketti projektiisi suorittamalla seuraavan komennon terminaalissasi:

npm install --save toastr

Nyt olet asentanut toastr paketti ja voi käyttää sitä ilmoitusten näyttämiseen.

Ilmoitusten luominen Toastrilla

Voit luoda ilmoituksia käyttämällä toastr toiminto. The toastr -toimintoa käytetään toast-viestien luomiseen ja näyttämiseen. Varmista ennen ilmoitusten luomista, että tuot ilmoituksesi toastr ilmoitustyylejä CSS-tiedostossasi.

@import'toastr';

Tässä on esimerkki siitä, kuinka luot ilmoituksen käyttämällä toastr toiminto:

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;

Tässä esimerkissä määrität a ilmoittaa toiminto. The Napsauta Minä -painike kutsuu ilmoittaa toimintoa, kun napsautat sitä. The ilmoittaa toiminto käyttää paahtoleipä.menestys toiminto näyttää onnistumisilmoituksen.

The paahtoleipä.menestys funktio ottaa kaksi argumenttia. Ensimmäinen argumentti on ilmoitusviesti, joka tässä tapauksessa on merkkijono "On mukavaa, että olet täällä". Toinen argumentti on ilmoituksen otsikko, "Tervetuloa".

Seuraavan kuvan kaltainen ilmoitus tulee näkyviin, kun napsautat Napsauta Minä -painiketta.

Lisäksi paahtoleipä.menestys toiminto, toastr objekti tarjoaa muita toimintoja ilmoitusten luomiseen. Muut toiminnot ovat toastr.error, toastr.warning, ja toastr.info. Jokainen toiminto luo ilmoituksen eri taustavärillä ja kuvakkeella, joten voit helposti erottaa erityyppiset ilmoitukset.

Esimerkiksi kun käytät toastr.error toiminto, ilmoituksesi näyttää tältä:

Ilmoitusten mukauttaminen

Toastr-kirjaston avulla et voi mukauttaa ilmoituksia perinteisellä CSS-syötteellä, toisin kuin kun työskentelet React-Toastifyn kanssa. Toastr tarjoaa kuitenkin edelleen muita vaihtoehtoja ilmoitusten mukauttamiseen. Voit käyttää näitä vaihtoehtoja mukauttaaksesi ilmoitustesi sijaintia, ulkoasua ja toimintoja. Sinun on siirrettävä vaihtoehdot kolmanteen argumenttiin toastr menetelmä.

Tässä on esimerkki:

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;

Ilmoituksen mukauttamiseen tämä koodi käyttää SuljeButton, edistymispalkki, Aikalisä, sijainti Luokka, showMethod, ja piilota menetelmä Optio-objektin ominaisuudet. The SuljeButton ominaisuus määrittää, näytetäänkö ilmoituksesi sulkemispainikkeen kanssa. Se hyväksyy loogisen arvon.

Käyttämällä edistymispalkki ominaisuutta, voit lisätä ilmoitukseen edistymispalkin. Asettamalla Aikalisä ominaisuuden avulla voit hallita, kuinka kauan ilmoitus näytetään. Tämä ominaisuus määrittää, kuinka monta millisekuntia ennen kuin ilmoitus katoaa automaattisesti.

The sijainti Luokka ominaisuus määrittää ilmoituksen sijainnin näytölläsi. Se hyväksyy kahdeksan ennalta määritettyä arvoa. Arvot sisältävät:

• paahtoleipä-ylhäällä oikea: Näyttää ilmoituksen näytön oikeassa yläkulmassa.
• paahtoleipä-ylävasen: Ilmoitus näkyy näytön vasemmassa yläkulmassa.
• toast-top-center: Ilmoitus näkyy näytön yläreunassa keskellä.
• paahtoleipä-alhaalla-oikealla: Näet ilmoituksen näytön oikeassa alakulmassa.
• paahtoleipä-alhaalla-vasemmalla: Ilmoitus sijoitetaan näytön vasempaan alakulmaan.
• paahtoleipä-pohja-keskus: Löydät ilmoituksen näytön alareunasta keskellä.
• paahtoleipä-top-täysleveä: Ilmoitus näkyy näytön yläreunassa ja täyttää koko näytön leveyden.
• paahtoleipä-pohja-täysleveä: Ilmoitus täyttää koko näytön leveyden ja näkyy alareunassa.

Lopuksi, showMethod ja piilota menetelmä Ominaisuudet ohjaavat animaatioita ilmoituksen näyttämiseksi ja piilottamiseksi. The showMethod ominaisuus määrittää animaation, jota käytetään ilmoituksen näyttämiseen, kun taas piilota menetelmä ominaisuus määrittää animaation, jota käytetään ilmoituksen piilottamiseen.

Yllä olevassa koodilohkossa määritetty ilmoitus näkyy näytön yläreunassa, edistymispalkin ja sulkemispainikkeen kera. Se katoaa kolmen sekunnin kuluttua ja käyttää häivytys- ja häivytyssiirtymiä näyttääkseen ja katotakseen.

Se näyttää tältä.

Huomaa, että voit mukauttaa jokaista Toastrin ilmoitusta yhdellä optioobjektilla sen sijaan, että mukautat niitä yksitellen. Tätä varten käytät toast.options omaisuutta. Tämä ominaisuusobjekti sisältää kaikkien Toastr-ilmoitustesi mukautusominaisuudet.

Esimerkiksi:

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;

Tämä esimerkki näyttää, kuinka kaikki ilmoitukset määritetään siten, että niissä on edistymispalkki, sulkemispainike ja näyttö oikeassa yläkulmassa näytön kulmassa, sulkeutuu automaattisesti 5 sekunnin kuluttua ja käytä häivytys- ja poistumissiirtymiä näyttääksesi ja kadota.

Sovelluksen suorittaminen ja painikkeiden napsauttaminen luo käyttöliittymän, joka näyttää alla olevan kuvan kaltaisesta.

Tee ilmoituksistasi interaktiivisia

Voit tehdä ilmoituksistasi kiinnostavampia lisäämällä interaktiivisuutta, kuten mahdollisuuden napsauttaa niitä. Voit tehdä tämän käyttämällä klikkaamalla omaisuutta. The klikkaamalla ominaisuus on yksi Toastrin kirjaston tarjoamista mukautusvaihtoehdoista. Se määrittää toiminnon, joka suoritetaan, kun napsautat ilmoitusta, samanlainen kuin napsauta tapahtumaa (yksi JavaScriptin tapahtumakuuntelijoista).

Tässä on esimerkki kuinka käyttää klikkaamalla omaisuus:

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;

Yllä olevassa koodilohkossa vaihtoehdot-objekti paahtoleipä.menestys funktio sisältää an klikkaamalla omaisuutta. The klikkaamalla omaisuus kutsuu toastr.clear toiminto, joka poistaa ilmoituksen näytöltä.

Luo kiinnostavia ilmoituksia Toastrilla

Täällä opit käyttämään Toastr-kirjastoa kiinnostavien ilmoitusten luomiseen React-sovelluksellesi. Asensit Toastrin, määritit sen sovellukseesi ja loit ja mukautit ilmoituksesi. Toastr on tehokas kirjasto, jonka avulla voit luoda informatiivisia ja visuaalisesti houkuttelevia ilmoituksia. Toastrin lisäksi voit kokeilla myös muita kirjastoja, kuten SweetAlert, React-Toastify tai Chakra UI.