Kuinka luoda mukautettuja hälytyksiä Reactissa React-Toastifyn avulla

Varoitusviestejä käytetään usein verkkosovelluksissa varoitusten, virheiden, menestysviestien ja muun arvokkaan tiedon näyttämiseen.

Reactissa on muutamia suosittuja paketteja ja kehyksiä hälytysviestien tekemiseen. React-Toastify on React-kirjasto, jonka avulla voit lisätä ilmoituksia ja hälytysviestejä sovelluksiisi.

React Toastifyn asentaminen

Asenna Toastify React-projektiisi suorittamalla tämä komento projektihakemistossasi:

npm install --save react-toastify

Toastifyn käyttöönotto

Jotta voit käyttää Toastify-pakettia, sinun on tuotava ToastContainer, paahtoleipä menetelmän ja paketin mukana tulevan CSS-tiedoston.

The ToastContainer App-komponentti tallentaa kaikki luodut paahtoleipäilmoitukset.

tuonti { ToastContainer, toast } alkaen"reagoi-paahda";
tuonti"react-toastify/dist/ReactToastify.css";
toimintoSovellus() {
palata(



 </div>
 );
}

Voit käyttää paahtoleipä tapoja luoda paahtoleipäilmoituksia React-projektillesi:

toimintoSovellus() {
konst ilmoittaa = () => toast.success("Hei siellä!");
palata(


Ilmoita </button>

 </div>
 );
}

Napsauttamalla tämän koodin luomaa painiketta kutsutaan paahtoleipä.menestys menetelmällä, välittää sille "Hei!!" merkkijono. Tämä luo paahtoleipäilmoituksen, joka näyttää viestin näytöllä seuraavasti:

Huomaa, että voit kutsua erilaisia ​​paahtoleipämenetelmiä, kuten toast.info(), toast.error(), toast.success(), toast.warning(). Jokaisella näistä menetelmistä on hienovarainen värityyli, joka heijastaa viestin tyyppiä.

Toast-ilmoitusten sijoittaminen

Oletusarvoisesti paahtoleipäilmoitukset tulevat näkyviin verkkosovelluksen näytön oikeasta yläkulmasta. Voit muuttaa tätä asettamalla sijaintiominaisuuden ToastContainer. Käytettävissä on kuusi sijaintiarvoa: ylhäällä oikea, ylhäällä keskellä, ylhäällä vasen, alhaalla oikea, alhaalla keskellä ja alhaalla vasen.

Esimerkiksi:

toimintoSovellus() {
konst ilmoittaa = () => toast.success("Hei siellä!");
palata(


Ilmoita </button>
"ylävasen"/>
 </div>
 );
}

Asentotuen asettaminen ToastContainer vasemmassa yläkulmassa varmistaa, että kaikki paahtoleipäilmoitukset ilmestyvät näytön vasemmasta yläkulmasta.

Voit muuttaa yksittäisten paahtoleipäilmoitusten oletussijaintia käyttämällä sovelluksen sijaintikeppiä paahtoleipä menetelmät:

toimintoSovellus() {
konst ilmoittaa = () => toast.success("Hei siellä!", {asema: paahtoleipä. POSITION.TOP_CENTER});
palata(


Ilmoita </button>
"ylävasen"/>
 </div>
 );
}

Voit myös sijoittaa Toast-ilmoitukset käyttämällä CSS-sijaintiominaisuutta, mutta Toastifyn sijaintipotku on tavallinen tapa tehdä tämä.

Toast Methodin ja ToastContainerin automaattisen sulkemisen tukiosan käsittely

Voit muuttaa paahtoleipäilmoitusten näyttöaikaa. Voit hallita, kuinka kauan paahtoleipäilmoitus pysyy auki käyttämällä automaattinen sulkeminen prop. Voit muuttaa kaikkien paahtoleipäilmoitusten ja yksittäisten paahtoleipäilmoitusten viiveaikaa. The automaattinen sulkeminen prop hyväksyy vain loogisen arvon false tai keston millisekunteina.

Voit muuttaa kaikkien paahtoleipäilmoitusten viiveaikaa käyttämällä automaattinen sulkeminen tuki sisällä ToastContainer elementti.

Esimerkiksi:

toimintoSovellus() {
konst ilmoittaa = () => toast.success("Hei siellä!");
palata(


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

Yllä olevilla asetuksilla kaikki paahtoleipäilmoitukset näkyvät tarkalleen viiden sekunnin ajan (5 000 millisekuntia).

Käyttämällä automaattinen sulkeminen jokaisen omaisuutta paahtoleipä menetelmällä voit mukauttaa yksittäisten paahtoleipäilmoitusten viiveaikaa.

Esimerkiksi:

toimintoSovellus() {
konst notifyOne = () => toast.info("Sulkeutuu 10 sekunnin kuluttua", {automaattinen sulkeminen: 10000});
konst notifyTwo = () => toast.info("Sulkeutuu 15 sekunnin kuluttua", {automaattinen sulkeminen: 15000});
palata (


Ilmoita yhdelle</button>
Ilmoita kahdelle</button>

 </div>
 );
}

Voit estää paahtoleipäilmoitusta sulkeutumasta oletusarvoisesti määrittämällä automaattinen sulkeminen tukea väärä. Voit varmistaa, että käyttäjän on suljettava jokainen paahtoleipäilmoitus manuaalisesti asettamalla automaattinen sulkeminen prop of ToastContainer vääräksi.

Esimerkiksi:

toimintoSovellus() {
konst ilmoittaa = () => toast.info("Hei siellä!");
palata (


Ilmoita </button>
väärä} />
 </div>
 );
}

Asettamalla automaattinen sulkeminen yksilön rekvisiitta paahtoleipä menetelmiä väärä varmistaa myös, että kyseiset paahtoleipäilmoitukset eivät sulkeudu oletusarvoisesti.

Muiden kuin merkkijonoilmoitusten renderöinti Toastifylla

Voit renderöidä merkkijonoja, reagoida komponentteihin ja numeroihin ilmoitusviesteinä, kun käsittelet paahtoleipäilmoituksia. Jos haluat hahmontaa React-komponentin paahtoleipäilmoituksena, luo komponentti ja renderöi se käyttämällä a paahtoleipä menetelmä.

Esimerkiksi:

toimintoViesti({toastProps, closeToast}) {
palata (


Tervetuloa {toastProps.position}</p>
</button>
 </div>
 )
}
viedäoletuksena Viesti;

Tämä koodilohko luo komponentin, Viesti. Kun komponentti hahmonnetaan ilmoituksena, toast lisää toastProps ja closeToast rekvisiitta komponentiisi. The closeToast prop on toiminto, jonka avulla voit sulkea ilmoituksen. The toastProps prop on objekti, jolla on ominaisuuksia, jotka tallentavat tietoja paahtoleipäilmoituksesta, mukaan lukien sen sijainti, tyyppi ja muut ominaisuudet.

Tuo Viesti-komponentti ja välitä se sitten toast()-funktiolle, mikä tekee siitä toast-ilmoituksena:

tuonti { ToastContainer, toast } alkaen"reagoi-paahda";
tuonti"react-toastify/dist/ReactToastify.css";
tuonti Viesti alkaen"./components/Message";
toimintoSovellus() {
konst msg = () => paahtoleipä(<Viesti />);
palata (


Tervetuloa</button>

 </div>
 );
}

Napsauttamalla painiketta näytölle tulee ilmoitus, joka sisältää kysymyksen ja kaksi painiketta.

Muotoilu Toast-ilmoitukset

Sinun ei tarvitse käyttää paahtoleipäilmoitusten oletustyyliä. Voit mukauttaa niitä haluamaasi suunnitteluteemaan tai verkkosovellukseesi sopivaan malliin.

Voit muokata paahtoleipäilmoituksen tyyliä antamalla sille a luokan nimi ja käyttää mukautuksia CSS-tiedoston sisällä.

Esimerkiksi:

toimintoSovellus() {
konst ilmoittaa = () => toast.success("Hei siellä!", {luokan nimi: "paahtoleipäviesti"});
palata (


Ilmoita </button>
"ylhäällä keskellä" />
 </div>
 );
}

Kanssa luokan nimi liitteenä ilmoitukseesi, voit muotoilla paahtoleipäilmoituksen haluamallasi tavalla CSS-tiedoston sisällä:

.toast-viesti {
taustaväri: #000000;
väri: #FFFFFF;
Fonttikoko: 20px;
pehmuste: 1rem 0.5 rem;
}

Yllä olevan mukautetun tyylin seurauksena ilmoitus näyttää tältä:

Toast-ilmoitukset verkkosovelluksellesi

Voit nyt luoda mukautettuja hälytyksiä Reactissa käyttämällä React-Toastify-pakettia ja sen käytettävissä olevia menetelmiä. Muotoilemalla nämä mukautetut hälytykset/ilmoitukset haluamallasi tavalla voit parantaa verkkosovelluksesi käyttökokemusta.

React-Toastify tarjoaa nopean ja tehokkaan tavan lisätä mukautettuja hälytyksiä React-projektiisi ilman meteliä.