Ako vytvoriť vlastné upozornenia v React pomocou React-Toastify

Výstražné správy sa vo webových aplikáciách často používajú na zobrazenie upozornení, chýb, správ o úspechu a ďalších cenných informácií.

Existuje niekoľko populárnych balíkov a rámcov na vytváranie výstražných správ v React. React-Toastify je knižnica React, ktorá vám umožňuje pridávať upozornenia a výstražné správy do vašich aplikácií.

Inštalácia React Toastify

Ak chcete nainštalovať Toastify do svojho projektu React, spustite tento príkaz v adresári projektu:

npm install --save reagovat-toastify

Nastavenie funkcie Toastify

Ak chcete použiť balík Toastify, budete musieť importovať súbor ToastContainer, toast a sprievodný súbor CSS poskytnutý balíkom.

The ToastContainer vo vnútri komponentu App sú uložené všetky vytvorené upozornenia.

importovať { Nádoba na toasty, toasty } od"reagovať-toastify";
importovať'react-toastify/dist/ReactToastify.css';
funkciuApp() {
vrátiť(



 </div>
 );
}

Môžete použiť toast metódy na vytvorenie upozornení na toast pre váš projekt React:

funkciuApp() {
konšt oznámiť = () => toast.úspech("Ahoj!");
vrátiť(


Upozorniť</button>

 </div>
 );
}

Kliknutím na tlačidlo, ktoré tento kód vygeneruje, zavoláte toast.úspech metódou, odovzdaním "Ahoj!" reťazec. Tým sa vytvorí upozornenie na toast, ktoré zobrazí správu na obrazovke, ako je toto:

Všimnite si, že existujú rôzne typy toastových metód, ktoré môžete zavolať, ako napr toast.info(), toast.error(), toast.success(), toast.warning(). Každá z týchto metód má nejaký jemný farebný štýl, ktorý odráža typ správy.

Umiestnenie upozornení na toast

V predvolenom nastavení sa upozornenia na toasty zobrazujú v pravej hornej časti obrazovky webovej aplikácie. Môžete to zmeniť nastavením vlastnosti position na ToastContainer. K dispozícii je šesť hodnôt polohy: vpravo hore, v strede hore, vľavo hore, vpravo dole, v strede dole a vľavo dole.

Napríklad:

funkciuApp() {
konšt oznámiť = () => toast.úspech("Ahoj!");
vrátiť(


Upozorniť</button>
"hore v ľavo"/>
 </div>
 );
}

Nastavenie polohy podpery na ToastContainer v ľavom hornom rohu zaisťuje, že sa všetky upozornenia na toasty objavia z ľavej hornej strany obrazovky.

Predvolenú polohu pre jednotlivé upozornenia na toasty môžete zmeniť pomocou podpery polohy toast metódy:

funkciuApp() {
konšt oznámiť = () => toast.úspech("Ahoj!", {pozíciu: prípitok. POSITION.TOP_CENTER});
vrátiť(


Upozorniť</button>
"hore v ľavo"/>
 </div>
 );
}

Môžete tiež umiestniť upozornenia Toast pomocou vlastnosti CSS position, ale pozícia Toastify je štandardný spôsob, ako to urobiť.

Manipulácia s autoClose Prop metódy Toast a ToastContainer

Môžete zmeniť čas zobrazenia upozornení na toast. Môžete ovládať, ako dlho zostane upozornenie na toast otvorené pomocou autoClose rekvizita. Môžete zmeniť čas oneskorenia pre všetky upozornenia na toasty a individuálne upozornenia na toasty. The autoClose prop akceptuje iba boolovskú hodnotu false alebo trvanie v milisekundách.

Ak chcete zmeniť čas oneskorenia pre všetky upozornenia na toasty, použite autoClose rekvizita v rámci ToastContainer element.

Napríklad:

funkciuApp() {
konšt oznámiť = () => toast.úspech("Ahoj!");
vrátiť(


Upozorniť</button>
5000}/>
 </div>
 );
}

Pri vyššie uvedených nastaveniach sa všetky upozornenia na toasty zobrazia presne na päť sekúnd (5 000 milisekúnd).

Pomocou autoClose majetok každého toast môžete prispôsobiť čas oneskorenia pre jednotlivé upozornenia na toasty.

Napríklad:

funkciuApp() {
konšt notifyOne = () => toast.info("Zatvorí sa o 10 sekúnd", {autoClose: 10000});
konšt notifyTwo = () => toast.info("Zatvorí sa o 15 sekúnd", {autoClose: 15000});
vrátiť (


Upozorniť One</button>
Upozorniť dva</button>

 </div>
 );
}

Ak chcete zabrániť predvolenému zatvoreniu upozornenia na toast, môžete nastaviť autoClose podoprieť sa falošný. Môžete zabezpečiť, aby používateľ manuálne zatvoril každé upozornenie na toast, nastavením autoClose opora z ToastContainer na falošné.

Napríklad:

funkciuApp() {
konšt oznámiť = () => toast.info("Ahoj!");
vrátiť (


Upozorniť</button>
falošný} />
 </div>
 );
}

Nastavenie autoClose rekvizita jednotlivca toast metódy na falošný tiež zabezpečí, že tieto špecifické upozornenia na toast sa predvolene nezatvoria.

Vykresľovanie nereťazcových upozornení pomocou funkcie Toastify

Reťazce, komponenty reakcie a čísla môžete vykresliť ako oznamovacie správy pri práci s upozorneniami toastu. Ak chcete vykresliť komponent React ako upozornenie na toast, vytvorte komponent a vyrenderujte ho pomocou a toast metóda.

Napríklad:

funkciuSpráva({toastProps, closeToast}) {
vrátiť (


Vitajte {toastProps.position}</p>
</button>
 </div>
 )
}
exportpredvolená Správa;

Tento blok kódu vytvára komponent, Správa. Pri vykresľovaní komponentu ako upozornenia sa pridáva toast toastProps a closeToast rekvizity k vášmu komponentu. The closeToast prop je funkcia, ktorú môžete použiť na zatvorenie upozornenia. The toastProps prop je objekt s vlastnosťami, ktoré ukladajú podrobnosti o oznámení o prípitku vrátane jeho polohy, typu a ďalších charakteristík.

Importujte komponent Message, potom ho odovzdajte funkcii toast() a vykreslite ho ako upozornenie na toast:

importovať { Nádoba na toasty, toasty } od"reagovať-toastify";
importovať'react-toastify/dist/ReactToastify.css';
importovať Správa od"./components/Message";
funkciuApp() {
konšt msg = () => toast(<Správa />);
vrátiť (


Vitajte</button>

 </div>
 );
}

Kliknutím na tlačidlo sa na obrazovke zobrazí upozornenie obsahujúce otázku a dve tlačidlá.

Štýlové upozornenia na toasty

Pre upozornenia na toasty nemusíte používať predvolený štýl. Môžete si ich prispôsobiť tak, aby vyhovovali požadovanej dizajnovej téme alebo vzoru vhodnému pre vašu webovú aplikáciu.

Ak chcete upraviť svoje upozornenie na toast, dajte mu a className a použiť prispôsobenia v súbore CSS.

Napríklad:

funkciuApp() {
konšt oznámiť = () => toast.úspech("Ahoj!", {className: "toast-správa"});
vrátiť (


Upozorniť</button>
"hore v strede" />
 </div>
 );
}

S className priložené k vášmu upozorneniu, môžete si upraviť toastové upozornenie podľa svojich preferencií v súbore CSS:

.toast-správa {
farba pozadia: #000000;
farba: #FFFFFF;
veľkosť písma: 20px;
vypchávka: 1rem 0.5rem;
}

V dôsledku vyššie uvedeného vlastného štýlu bude upozornenie vyzerať takto:

Toastové upozornenia pre vašu webovú aplikáciu

Teraz môžete vytvárať vlastné upozornenia v React pomocou balíka React-Toastify a jeho dostupných metód. Štýlom týchto vlastných upozornení/upozornení podľa vašich preferencií môžete zlepšiť používateľský zážitok z vašej webovej aplikácie.

React-Toastify ponúka rýchlu a efektívnu metódu na zahrnutie vlastných upozornení do vášho projektu React bez problémov.