Kako stvoriti prilagođena upozorenja u Reactu koristeći React-Toastify

Poruke upozorenja često se koriste u web-aplikacijama za prikaz upozorenja, pogrešaka, poruka o uspjehu i drugih vrijednih informacija.

Postoji nekoliko popularnih paketa i okvira za izradu poruka upozorenja u Reactu. React-Toastify je React biblioteka koja vam omogućuje dodavanje obavijesti i poruka upozorenja u vaše aplikacije.

Instaliranje React Toastifyja

Da biste instalirali Toastify u svoj React projekt, pokrenite ovu naredbu u svom direktoriju projekta:

npm install --save react-toastify

Postavljanje Toastifyja

Da biste koristili paket Toastify, morat ćete uvesti Spremnik za tost, tost metodu i popratnu CSS datoteku koju pruža paket.

The Spremnik za tost unutar komponente aplikacije pohranjuje sve stvorene tost obavijesti.

uvoz { ToastContainer, toast } iz"reagiraj-nazdravi";
uvoz'react-toastify/dist/ReactToastify.css';
funkcijaaplikacija() {
povratak(



 </div>
 );
}

Možete koristiti tost metode za stvaranje tost obavijesti za vaš React projekt:

funkcijaaplikacija() {
konst obavijestiti = () => tost.uspjeh("Zdravo!");
povratak(


Obavijesti</button>

 </div>
 );
}

Klikom na gumb koji ovaj kod generira pozvati će se tost.uspjeh metoda, prosljeđujući joj "Hello There!" niz. Ovo će stvoriti tost obavijest koja prikazuje poruku na zaslonu, poput ove:

Imajte na umu da postoje različite vrste metoda tostiranja koje možete pozvati, kao što je toast.info(), toast.error(), toast.success(), tost.warning(). Svaka od ovih metoda ima neki suptilni stil boje koji odražava vrstu poruke.

Pozicioniranje Toast obavijesti

Prema zadanim postavkama, tost obavijesti iskaču s gornje desne strane zaslona web-aplikacije. To možete promijeniti postavljanjem svojstva position na Spremnik za tost. Dostupno je šest vrijednosti položaja: gore desno, gore središte, gore lijevo, dolje desno, dolje središte i dolje lijevo.

Na primjer:

funkcijaaplikacija() {
konst obavijestiti = () => tost.uspjeh("Zdravo!");
povratak(


Obavijesti</button>
"gore lijevo"/>
 </div>
 );
}

Postavljanje oslonca položaja na Spremnik za tost gore lijevo osigurava da sve obavijesti o tostu iskaču s gornje lijeve strane zaslona.

Možete promijeniti zadani položaj za pojedinačne tost obavijesti korištenjem položaja prop od tost metode:

funkcijaaplikacija() {
konst obavijestiti = () => tost.uspjeh("Zdravo!", {položaj: dvopek. POSITION.TOP_CENTER});
povratak(


Obavijesti</button>
"gore lijevo"/>
 </div>
 );
}

Također možete postaviti Toast obavijesti koristeći CSS svojstvo pozicije, ali Toastifyjev oslonac za položaj standardni je način za to.

Rukovanje propisom za automatsko zatvaranje Toast metode i ToastContainer

Možete promijeniti vrijeme prikaza tost obavijesti. Možete kontrolirati koliko dugo tost obavijest ostaje otvorena pomoću autoClose oslonac Možete promijeniti vrijeme odgode za sve tost obavijesti i pojedinačne tost obavijesti. The autoClose prop prihvaća samo Booleovu vrijednost false ili trajanje u milisekundama.

Za promjenu vremena odgode za sve tost obavijesti, koristite autoClose oslonac unutar Spremnik za tost element.

Na primjer:

funkcijaaplikacija() {
konst obavijestiti = () => tost.uspjeh("Zdravo!");
povratak(


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

S gornjim postavkama, sve obavijesti o tostu prikazivat će se točno pet sekundi (5000 milisekundi).

Koristiti autoClose vlasništvo svakoga tost možete prilagoditi vrijeme odgode za pojedinačne tost obavijesti.

Na primjer:

funkcijaaplikacija() {
konst notifyOne = () => toast.info("Zatvara se za 10 sekundi", {autoClose: 10000});
konst obavijestiDva = () => toast.info("Zatvara se za 15 sekundi", {autoClose: 15000});
povratak (


Obavijesti jedan</button>
Obavijesti dva</button>

 </div>
 );
}

Kako biste spriječili zatvaranje obavijesti tosta prema zadanim postavkama, možete postaviti autoClose podupirati lažno. Možete osigurati da korisnik mora ručno zatvoriti svaku obavijest o tostu postavljanjem autoClose oslonac od Spremnik za tost na lažno.

Na primjer:

funkcijaaplikacija() {
konst obavijestiti = () => toast.info("Zdravo!");
povratak (


Obavijesti</button>
lažno} />
 </div>
 );
}

Postavljanje autoClose prop of individual tost metode za lažno također će osigurati da se te specifične tost obavijesti ne zatvaraju prema zadanim postavkama.

Prikaz obavijesti koje nisu nizovi pomoću Toastifyja

Možete prikazati nizove, komponente reakcije i brojeve kao poruke obavijesti kada radite s obavijestima o tostu. Da biste renderirali React komponentu kao toast obavijest, izradite komponentu i renderirajte je pomoću a tost metoda.

Na primjer:

funkcijaPoruka({toastProps, closeToast}) {
povratak (


Dobro došli {toastProps.position}</p>
</button>
 </div>
 )
}
izvozzadano Poruka;

Ovaj blok koda stvara komponentu, Poruka. Kada se komponenta prikazuje kao obavijest, tost dodaje toastProps i zatvori Toast rekvizite vašoj komponenti. The zatvori Toast prop je funkcija koju možete koristiti za zatvaranje obavijesti. The toastProps prop je objekt sa svojstvima koja pohranjuju pojedinosti o tost obavijesti uključujući njen položaj, vrstu i druge karakteristike.

Uvezite komponentu poruke, zatim je proslijedite funkciji toast(), prikazujući je kao tost obavijest:

uvoz { ToastContainer, toast } iz"reagiraj-nazdravi";
uvoz'react-toastify/dist/ReactToastify.css';
uvoz Poruka iz"./components/Message";
funkcijaaplikacija() {
konst poruka = () => tost(<Poruka />);
povratak (


dobrodošli</button>

 </div>
 );
}

Klikom na gumb prikazat će se obavijest koja sadrži pitanje i dva gumba na vašem zaslonu.

Styling Toast Obavijesti

Ne morate koristiti zadani stil za svoje tost obavijesti. Možete ih prilagoditi da odgovaraju željenoj temi dizajna ili uzorku koji odgovara vašoj web aplikaciji.

Da biste stilizirali svoju obavijest o zdravici, dajte joj a naziv klase i primijenite prilagodbe unutar CSS datoteke.

Na primjer:

funkcijaaplikacija() {
konst obavijestiti = () => tost.uspjeh("Zdravo!", {naziv klase: "zdravica-poruka"});
povratak (


Obavijesti</button>
"gore u sredini" />
 </div>
 );
}

s naziv klase priloženoj vašoj obavijesti, možete oblikovati tost obavijest prema svojim željama unutar CSS datoteke:

.zdravica-poruka {
boja pozadine: #000000;
boja: #FFFFFF;
veličina fonta: 20px;
podstava: 1rem 0.5rem;
}

Kao rezultat gornjeg prilagođenog stila, obavijest će izgledati ovako:

Toast obavijesti za vašu web aplikaciju

Sada možete kreirati prilagođena upozorenja u Reactu koristeći React-Toastify paket i njegove dostupne metode. Oblikovanjem ovih prilagođenih upozorenja/obavijesti prema vašim željama možete poboljšati korisničko iskustvo svoje web aplikacije.

React-Toastify nudi brzu i učinkovitu metodu za uključivanje prilagođenih upozorenja u vaš React projekt bez muke.