Jak stworzyć niestandardowy komponent powiadomień w React za pomocą SweetAlert

SweetAlert to popularna biblioteka, która daje możliwość tworzenia niestandardowych komponentów powiadomień dla aplikacji React. Za pomocą powiadomień możesz ostrzegać użytkowników o ważnych informacjach, błędach lub pomyślnych działaniach w Twojej aplikacji. To składa się na wspaniałe wrażenia użytkownika.

Instalowanie biblioteki SweetAlert

Aby użyć Słodki alarm bibliotekę do tworzenia powiadomień, musisz ją zainstalować za pomocą dowolnego wybranego menedżera pakietów.

Możesz zainstalować go przez Menedżer pakietów NPM uruchamiając następujące polecenie w swoim terminalu:

npm install sweetalert --save

Używanie SweetAlert do tworzenia powiadomień

Tworzenie niestandardowych powiadomień w aplikacji React przy użyciu biblioteki SweetAlert jest podobne do przy użyciu biblioteki Toastify. The połykać Funkcja udostępniana przez bibliotekę SweetAlert tworzy instancję komponentu powiadomień i definiuje właściwości powiadomienia.

Oto przykład użycia jaskółka() funkcja tworzenia komponentu powiadomienia:

import Reagować z'reagować'
import połykać z„cukiereczek”
funkcjonowaćAplikacja() {
konst powiadomić = () => połykać ('Witam');
powrót (



Kliknij mnie</button>
 </div>
 )
}
eksportdomyślny Aplikacja

Kliknięcie przycisku spowoduje wywołanie połykać funkcję, która wyświetli powiadomienie z komunikatem „Hello There”.

The połykać funkcja przyjmuje trzy parametry. Pierwszy parametr to tytuł powiadomienia, drugi to treść wiadomości, a trzeci to ikona do wyświetlenia w powiadomieniu.

Możesz ustawić Ikona parametr na jedną z predefiniowanych wartości, tj. powodzenie, ostrzeżenie, błąd, Lub informacje. Ikona powiadomienia będzie wtedy oparta na przekazanych wartościach.

Na przykład:

import Reagować z'reagować'
import połykać z„cukiereczek”
funkcjonowaćAplikacja() {
konst powiadomić = () => połykać ('Witam', 'Witam na mojej stronie', 'powodzenie');
powrót (



Kliknij mnie</button>
 </div>
 )
}
eksportdomyślny Aplikacja

Gdy użytkownik kliknie przycisk, wywołuje metodę notyfikować funkcjonować. Ta funkcja wyświetli następnie powiadomienie z komunikatem „Witaj” i „Witamy na mojej stronie” z ikoną sukcesu.

Alternatywa dla korzystania z połykać funkcja z trzema parametrami polegałaby na użyciu funkcji połykać funkcję z parametrem obiektu. Ten parametr obiektu zawiera właściwości, które definiują składnik powiadomienia.

Na przykład:

import Reagować z'reagować'
import połykać z„cukiereczek”
funkcjonowaćAplikacja() {
konst powiadomić = () => połykać (
 {
 tytuł: 'Witam',
 tekst: 'Witam na mojej stronie',
 Ikona: 'powodzenie',
 przycisk: 'OK',
 }
 );
powrót (



Kliknij mnie</button>
 </div>
 )
}
eksportdomyślny Aplikacja

W powyższym bloku kodu plik połykać funkcja przyjmuje obiekt o następujących właściwościach: tytuł, tekst, Ikona, I przycisk.

The tytuł właściwość określa tytuł powiadomienia, natomiast właściwość tekst właściwość definiuje komunikat. z Ikona możesz określić typ ikony wyświetlanej w powiadomieniu.

Wreszcie, przycisk określa tekst przycisku wyświetlanego w powiadomieniu. W takim przypadku przycisk wyświetla tekst OK.

Dostosowywanie właściwości przycisku

Możesz dostosować przycisk właściwości komponentu powiadomień, aby dopasować go do potrzeb projektowych. The przycisk właściwość pobiera obiekt z właściwościami używanymi do konfigurowania zachowania i wyglądu przycisku.

Domyślny przycisk zawiera następujące właściwości:

połykać (
 {
 przycisk: {
 tekst: "OK",
 wartość: PRAWDA,
 widoczny: PRAWDA,
 Nazwa klasy: "",
 zamknijModalny: PRAWDA
 },
 }
 );

W powyższym bloku kodu z przyciskiem używane są następujące właściwości:

• tekst: Tekst wyświetlany na przycisku.
• wartość: wartość zwracana, gdy użytkownik kliknie przycisk. W tym przypadku wartość jest PRAWDA.
• widoczny: Wartość logiczna wskazuje, czy przycisk powinien być widoczny.
• Nazwa klasy: Ciąg reprezentujący klasę CSS, która ma zostać zastosowana do przycisku.
• zamknijModalne: Wartość logiczna wskazująca, czy modal powinien zostać zamknięty po kliknięciu przycisku.

Możesz także renderować więcej niż jeden przycisk za pomocą tablicy z guziki nieruchomość. Tablica będzie przyjmować ciągi znaków jako elementy.

Na przykład:

połykać (
 {
 guziki: ["Anulować", "OK"],
 }
 );

W tym przykładzie składnik powiadomień będzie zawierał dwa przyciski z tekstami anulować I OK. Ustawianie guziki nieruchomość do FAŁSZ wyświetli powiadomienie bez przycisku.

Renderowanie elementów HTML w komponencie powiadomień

Możesz także renderować elementy HTML oprócz zwykłych ciągów jako powiadomienie. Zapewnia to szeroki zakres opcji dostosowywania.

Na przykład:

import Reagować z'reagować'
import połykać z„cukiereczek”
funkcjonowaćAplikacja() {
konst powiadomić = () => połykać (
 {
 treść: {
 element: 'wejście',
 atrybuty: {
 symbol zastępczy: 'Imię',
 typ: 'tekst'
 }
 },
 guziki: 'Zapisać się'
 }
 )
powrót (

„aplikacja”>
Kliknij mnie</button>
 </div>
 )
}
eksportdomyślny Aplikacja

W tym przykładzie używasz treść właściwość do renderowania pola wejściowego z tekstem zastępczym.

Treść powiadomienia określasz za pomocą treść właściwość i element HTML do renderowania za pomocą element nieruchomość. Aby określić atrybuty elementu HTML, użyj metody atrybuty nieruchomość.

Powyższy blok kodu wyświetli poniższe powiadomienie po kliknięciu elementu przycisku.

Stylizowanie komponentu powiadomień

Zamiast stosować się do domyślnego stylu okna powiadomień zapewnianego przez bibliotekę SweetAlert, możesz dostosować wygląd okna powiadomień, stosowanie własnych stylów CSS.

Będziesz korzystać z Nazwa klasy właściwość, aby dodać style do powiadomienia. The Nazwa klasy właściwość definiuje klasę CSS dla powiadomienia.

Na przykład:

połykać (
 {
 tytuł: 'Witam',
 tekst: 'Witam na mojej stronie',
 przycisk: FAŁSZ,
 Nazwa klasy: 'alarm',
 }
 )

Powiadomienie w powyższym bloku kodu ma Nazwa klasy wartość alarm. Po utworzeniu powiadomienia i zdefiniowaniu pliku Nazwa klasy, zdefiniujesz swoje style CSS:

.alarm{
kolor tła: zielony;
rodzina czcionek: kursywny;
promień granicy: 15piks;
}

Powyższe style CSS będą miały zastosowanie do powiadomienia podczas renderowania:

Zamykanie komponentu powiadomień

Biblioteka SweetAlert zapewnia kilka opcji dostosowywania sposobu zamykania powiadomień. Te opcje to zamknijOnEsc, closeOnClickOutside, I regulator czasowy nieruchomości.

The zamknijOnEsc określa, czy okno powiadomienia jest zamykane, gdy użytkownik naciśnie klawisz Esc na klawiaturze. The zamknijOnEsc właściwość przyjmuje wartość logiczną.

połykać (
 {
 ...,
 zamknijOnEsc: FAŁSZ,
 }
 )

Domyślnie zamknijOnEsc właściwość jest ustawiona na PRAWDA. W powyższym bloku kodu ustawiasz zamknijOnEsc nieruchomość do FAŁSZ. Ustawiając właściwość na FAŁSZ, użytkownik nie może zamknąć okna powiadomienia, naciskając klawisz Esc.

Możesz także określić, czy użytkownik może zamknąć okno powiadomienia, klikając poza nim, używając przycisku closeOnClickOutside nieruchomość.

Jeśli właściwość jest ustawiona na PRAWDA, closeOnClickOutside umożliwia zamknięcie okna powiadomienia poprzez kliknięcie w dowolnym miejscu poza nim. Jest to domyślne zachowanie SweetAlert. Aby zatrzymać to zachowanie, ustaw closeOnClickOutside nieruchomość do FAŁSZ.

połykać (
 {
 ...,
 closeOnClickOutside: FAŁSZ,
 }
 )

z regulator czasowy możesz ustawić limit czasu automatycznego zamykania okna powiadomień. The regulator czasowy właściwość przyjmuje wartość całkowitą w milisekundach.

połykać (
 {
 ...,
 regulator czasowy: 5000,
 }
 )

W tym przykładzie regulator czasowy właściwość jest ustawiona na 5000. Powiadomienie będzie widoczne tylko przez 5 sekund.

Wydajne niestandardowe powiadomienia za pomocą SweetAlert

SweetAlert to potężna biblioteka, za pomocą której możesz tworzyć niestandardowe powiadomienia w aplikacji React. Korzystanie z biblioteki połykać możesz teraz tworzyć powiadomienia z niestandardowymi właściwościami i zachowaniem. Możesz także skorzystać z innych bibliotek, takich jak React-Toastify, aby utworzyć niestandardowe alerty w aplikacji React.