07. Obavijesti - kristijan-perkovic96/Osnove-reacta GitHub Wiki

Uvijek volimo da dobijemo nekakvu obavijest o tome jesmo li uspješno izvršili neku akciju ili je možda došlo do neke greške te iz tog razloga ćemo pokazati kako se rade obavijesti.

Za kreiranje obavijesti potrebno je instalirati: npm i react-toastify

React-toastify nam omogućuje da kreiramo obavijesti na 6 različitih pozicija:

1. gore lijevo (top-left)
2. gore sredina (top-center)
3. gore desno (top-right)
4. dole lijevo (bottom-left)
5. dole sredina (bottom-center)
6. dole desno (bottom-right)

Po meni je najprirodnija pozicija obavijesti dole desno te ću je iz toga razloga koristiti. Naravno nije pozicija jedino svojstvo kojim možemo upravljat, tu se nalazi i duljina trajanja obavijesti, želimo li da se vidi progress bar ili ne, kojeg tipa želimo da bude obavijest želimo li da bude success, warning, info, error, default ili dark. Postoji još nekoliko svojstava koje možete pogledati u službenoj dokumentaciji.

Ukoliko želite da vam se prikazuju obavijesti potrebno je da negdje u svome kodu dodate , ja ga dodajem na kraju App.js kako bi bio dostupan kroz cijelu aplikaciju, također potrebno je dodati import import 'react-toastify/dist/ReactToastify.css'; kako bi vaše obavijesti imale lijepi dizajn.

Kreirali smo 3 obavijesti koje se podižu na klik gumba. Svaka ima definirana druga svojstva.

1. Prva je tipa success te kada se prikazuje zelene je boje, njezina pozicija je dole desno, vrijeme isteka 8000 ms, ukoliko dođemo mišem preko nje vrijeme se neće pauzirati, progrss bar se prikazuje te ju je moguće zatvoriti pritiskom na nju.
2. Druga obavijest je tipa error te je njezina boja crvena, pozicija je isto dole desno te ona traje dokle god ju ručno ne zatvorimo.
3. Treća obavijest je tipa warning te ona je žute boje, pozicija dole desno, ukoliko dođemo mišem preko nje vrijeme će se zaustaviti te joj je progress bar sakriven.

Prikaz rada: