Jak tworzyć niestandardowe alerty w React za pomocą React-Toastify

Komunikaty alertów są często używane w aplikacjach internetowych do wyświetlania ostrzeżeń, błędów, komunikatów o powodzeniu i innych cennych informacji.

Istnieje kilka popularnych pakietów i frameworków do tworzenia komunikatów ostrzegawczych w React. React-Toastify to biblioteka React, która pozwala dodawać powiadomienia i komunikaty ostrzegawcze do aplikacji.

Instalacja React Toastify

Aby zainstalować Toastify w projekcie React, uruchom to polecenie w katalogu projektu:

npm install --save reaguj-toastify

Konfigurowanie Toastify

Aby skorzystać z pakietu Toastify, musisz zaimportować plik Pojemnik na tosty, toast metoda i towarzyszący plik CSS dostarczony przez pakiet.

The Pojemnik na tosty wewnątrz komponentu App przechowuje wszystkie utworzone powiadomienia wyskakujące.

import { Pojemnik na tosty, tosty } z„reaguj-tostyfikuj”;
import„react-toastify/dist/ReactToastify.css”;
funkcjonowaćAplikacja() {
powrót(



 </div>
 );
}

Możesz użyć toast metody tworzenia wyskakujących powiadomień dla twojego projektu React:

funkcjonowaćAplikacja() {
konst powiadomić = () => tost.sukces("Witam!");
powrót(


Powiadom</button>

 </div>
 );
}

Kliknięcie przycisku wygenerowanego przez ten kod spowoduje wywołanie metody tost.sukces metoda, przekazując jej komunikat „Hello There!” strunowy. Spowoduje to utworzenie wyskakującego powiadomienia, które wyświetli komunikat na ekranie, na przykład:

Zauważ, że istnieją różne typy metod toast, które możesz wywołać, takie jak tosty.info(), toast.błąd(), toast.sukces(), toast.ostrzeżenie(). Każda z tych metod ma subtelną stylizację kolorystyczną, aby odzwierciedlić typ wiadomości.

Pozycjonowanie powiadomień Toast

Domyślnie wyskakujące powiadomienia pojawiają się w prawym górnym rogu ekranu aplikacji internetowej. Możesz to zmienić, ustawiając właściwość position w pliku Pojemnik na tosty. Dostępnych jest sześć wartości pozycji: góra-prawa, góra-środek, góra-lewa, dół-prawo, dół-środek i dół-lewo.

Na przykład:

funkcjonowaćAplikacja() {
konst powiadomić = () => tost.sukces("Witam!");
powrót(


Powiadom</button>
"lewy górny"/>
 </div>
 );
}

Ustawienie podpory pozycyjnej na Pojemnik na tosty w lewym górnym rogu gwarantuje, że wszystkie wyskakujące powiadomienia będą pojawiać się w lewym górnym rogu ekranu.

Możesz zmienić domyślną pozycję dla poszczególnych wyskakujących powiadomień, używając rekwizytu pozycji elementu toast metody:

funkcjonowaćAplikacja() {
konst powiadomić = () => tost.sukces("Witam!", {pozycja: toast. POSITION.TOP_CENTER});
powrót(


Powiadom</button>
"lewy górny"/>
 </div>
 );
}

Możesz także ustawić powiadomienia Toast za pomocą właściwości pozycji CSS, ale rekwizyt pozycji Toastify jest standardowym sposobem na zrobienie tego.

Obsługa autoClose Prop metody Toast i ToastContainer

Możesz zmienić czas wyświetlania wyskakujących powiadomień. Możesz kontrolować, jak długo wyskakujące powiadomienie pozostaje otwarte za pomocą automatyczne zamykanie rekwizyt. Możesz zmienić czas opóźnienia dla wszystkich powiadomień o tostach i indywidualnych powiadomień o tostach. The automatyczne zamykanie prop akceptuje tylko wartość logiczną false lub czas trwania w milisekundach.

Aby zmienić czas opóźnienia dla wszystkich wyskakujących powiadomień, użyj opcji automatyczne zamykanie podpora w Pojemnik na tosty element.

Na przykład:

funkcjonowaćAplikacja() {
konst powiadomić = () => tost.sukces("Witam!");
powrót(


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

Przy powyższych ustawieniach wszystkie wyskakujące powiadomienia będą wyświetlane dokładnie przez pięć sekund (5000 milisekund).

Używając automatyczne zamykanie własność każdego toast metody, możesz dostosować czas opóźnienia dla poszczególnych powiadomień toastowych.

Na przykład:

funkcjonowaćAplikacja() {
konst powiadomJeden = () => tosty.informacje(„Zamknie się za 10 sekund”, {automatyczne zamykanie: 10000});
konst powiadomDwa = () => tosty.informacje(„Zamknie się za 15 sekund”, {automatyczne zamykanie: 15000});
powrót (


Powiadom jednego</button>
Powiadom dwa</button>

 </div>
 );
}

Aby zapobiec domyślnemu zamknięciu wyskakującego powiadomienia, możesz ustawić automatyczne zamykanie podpora do FAŁSZ. Możesz upewnić się, że użytkownik musi ręcznie zamknąć każde wyskakujące powiadomienie, ustawiając plik automatyczne zamykanie podpora Pojemnik na tosty za fałszywe.

Na przykład:

funkcjonowaćAplikacja() {
konst powiadomić = () => tosty.informacje("Witam!");
powrót (


Powiadom</button>
FAŁSZ} />
 </div>
 );
}

Ustawianie automatyczne zamykanie rekwizyt osoby toast metody do FAŁSZ zapewni również, że te konkretne powiadomienia wyskakujące nie zostaną domyślnie zamknięte.

Renderowanie powiadomień innych niż łańcuchowe za pomocą Toastify

Podczas pracy z wyskakującymi powiadomieniami można renderować ciągi znaków, komponenty reagujące i liczby jako komunikaty powiadomień. Aby renderować komponent React jako wyskakujące powiadomienie, tworzysz komponent i renderujesz go za pomocą a toast metoda.

Na przykład:

funkcjonowaćWiadomość({toastProps, zamknijToast}) {
powrót (


Witamy {toastProps.position}</p>
</button>
 </div>
 )
}
eksportdomyślny Wiadomość;

Ten blok kodu tworzy komponent, Wiadomość. Podczas renderowania komponentu jako powiadomienia toast dodaje tostyProps I zamknijTosty props do twojego komponentu. The zamknijTosty prop to funkcja, której możesz użyć do zamknięcia powiadomienia. The tostyProps prop to obiekt z właściwościami, które przechowują szczegółowe informacje o wyskakującym powiadomieniu, w tym jego pozycję, typ i inne cechy.

Zaimportuj komponent Message, a następnie przekaż go do funkcji toast(), renderując go jako wyskakujące powiadomienie:

import { Pojemnik na tosty, tosty } z„reaguj-tostyfikuj”;
import„react-toastify/dist/ReactToastify.css”;
import Wiadomość z„./komponenty/Wiadomość”;
funkcjonowaćAplikacja() {
konst wiadomość = () => toast(<Wiadomość />);
powrót (


Witamy</button>

 </div>
 );
}

Kliknięcie przycisku spowoduje wyświetlenie powiadomienia zawierającego pytanie i dwa przyciski na ekranie.

Powiadomienia toastowe dotyczące stylizacji

Nie musisz używać domyślnego stylu dla wyskakujących powiadomień. Możesz je dostosować, aby pasowały do ​​pożądanego motywu projektu lub wzoru dopasowanego do Twojej aplikacji internetowej.

Aby nadać styl wyskakującemu powiadomieniu, nadaj mu a Nazwa klasy I zastosować dostosowania w pliku CSS.

Na przykład:

funkcjonowaćAplikacja() {
konst powiadomić = () => tost.sukces("Witam!", {Nazwa klasy: „toast-wiadomość”});
powrót (


Powiadom</button>
„górny środek” />
 </div>
 );
}

z Nazwa klasy dołączone do powiadomienia, możesz dostosować styl powiadomienia wyskakującego do swoich preferencji w pliku CSS:

.toast-wiadomość {
kolor tła: #000000;
kolor: #FFFFFF;
rozmiar czcionki: 20piks;
wyściółka: 1Rem 0.5 rem;
}

W wyniku powyższej niestandardowej stylizacji powiadomienie będzie wyglądać następująco:

Wyskakujące powiadomienia dla Twojej aplikacji internetowej

Możesz teraz tworzyć niestandardowe alerty w React przy użyciu pakietu React-Toastify i jego dostępnych metod. Stylizując te niestandardowe alerty/powiadomienia zgodnie z własnymi preferencjami, możesz poprawić komfort korzystania z aplikacji internetowej.

React-Toastify oferuje szybką i skuteczną metodę włączania niestandardowych alertów do projektu React bez zamieszania.