Jak vytvořit vlastní komponentu oznámení v React pomocí SweetAlert

SweetAlert je oblíbená knihovna, která vám dává možnost vytvářet přizpůsobené oznamovací komponenty pro vaši aplikaci React. Pomocí oznámení můžete upozornit uživatele na důležité informace, chyby nebo úspěšné akce ve vaší aplikaci. To přispívá ke skvělé uživatelské zkušenosti.

Instalace knihovny SweetAlert

Chcete-li použít SweetAlert Knihovna pro vytváření oznámení, musíte ji nainstalovat pomocí libovolného správce balíčků podle vašeho výběru.

Můžete jej nainstalovat přes Správce balíčků NPM spuštěním následujícího příkazu ve vašem terminálu:

npm nainstalovat sweetalert --uložit

Použití SweetAlert k vytváření oznámení

Vytváření vlastních oznámení v aplikaci React pomocí knihovny SweetAlert je podobné pomocí knihovny Toastify. The swal Funkce poskytovaná knihovnou SweetAlert vytvoří instanci komponenty oznámení a definuje vlastnosti oznámení.

Zde je příklad použití swal() funkce pro vytvoření komponenty oznámení:

import Reagovat z'reagovat'
import swal z'sweetalert'
funkceAplikace() {
konst oznámit = () => swal('Ahoj');
vrátit se (



Klikněte na Me</button>
 </div>
 )
}
vývoznívýchozí Aplikace

Kliknutím na tlačítko zavoláte swal funkce, která zobrazí upozornění se zprávou „Ahoj“.

The swal funkce má tři parametry. Prvním parametrem je název oznámení, druhým parametrem je zpráva a třetím je ikona, která se zobrazí v oznámení.

Můžete nastavit ikona parametr na jednu z předdefinovaných hodnot, tj. úspěch, Varování, chybanebo info. Notifikační ikona pak bude založena na hodnotách, které jste předali.

Například:

import Reagovat z'reagovat'
import swal z'sweetalert'
funkceAplikace() {
konst oznámit = () => swal('Ahoj', 'Vítejte na mé stránce', 'úspěch');
vrátit se (



Klikněte na Me</button>
 </div>
 )
}
vývoznívýchozí Aplikace

Když uživatel klikne na tlačítko, zavolá oznámit funkce. Tato funkce následně zobrazí upozornění se zprávou „Hello There“ a „Welcome to my Page“ s ikonou úspěchu.

Alternativa k použití swal funkce se třemi parametry by bylo použít swal funkce s parametrem objektu. Tento parametr objektu obsahuje vlastnosti, které definují komponentu oznámení.

Například:

import Reagovat z'reagovat'
import swal z'sweetalert'
funkceAplikace() {
konst oznámit = () => swal(
 {
 titul: 'Ahoj',
 text: 'Vítejte na mé stránce',
 ikona: 'úspěch',
 knoflík: 'OK',
 }
 );
vrátit se (



Klikněte na Me</button>
 </div>
 )
}
vývoznívýchozí Aplikace

Ve výše uvedeném bloku kódu je swal funkce přebírá objekt s následujícími vlastnostmi: titul, text, ikona, a knoflík.

The titul vlastnost určuje název oznámení, zatímco text vlastnost definuje zprávu. s ikona vlastnost, můžete určit typ ikony zobrazené v oznámení.

Konečně, knoflík vlastnost určuje text tlačítka zobrazeného v oznámení. V tomto případě tlačítko zobrazí text OK.

Přizpůsobení vlastnosti tlačítka

Můžete si přizpůsobit knoflík vlastnost vaší oznamovací komponenty, aby vyhovovala vašim potřebám návrhu. The knoflík property přebírá objekt s vlastnostmi používanými ke konfiguraci chování a vzhledu tlačítka.

Výchozí tlačítko obsahuje následující vlastnosti:

swal(
 {
 knoflík: {
 text: "OK",
 hodnota: skutečný,
 viditelné: skutečný,
 jméno třídy: "",
 closeModal: skutečný
 },
 }
 );

Ve výše uvedeném bloku kódu jsou s tlačítkem použity následující vlastnosti:

• text: Text, který se má zobrazit na tlačítku.
• hodnota: Hodnota, která se vrátí, když uživatel klikne na tlačítko. V tomto případě je hodnota skutečný.
• viditelné: Booleovská hodnota označuje, zda má být tlačítko viditelné.
• jméno třídy: Řetězec představující třídu CSS, která se má použít na tlačítko.
• closeModal: Booleovská hodnota udávající, zda má být modal uzavřen po kliknutí na tlačítko.

Můžete také vykreslit více než jedno tlačítko pomocí pole s tlačítka vlastnictví. Pole bude mít jako své prvky řetězce.

Například:

swal(
 {
 tlačítka: ["Zrušení", "OK"],
 }
 );

V tomto příkladu bude vaše oznamovací komponenta obsahovat dvě tlačítka s texty zrušení a OK. Nastavení tlačítka majetek do Nepravdivé vygeneruje oznámení bez tlačítka.

Vykreslování prvků HTML uvnitř komponenty oznámení

Jako upozornění můžete také vykreslit prvky HTML odděleně od jednoduchých řetězců. To poskytuje širokou škálu možností přizpůsobení.

Například:

import Reagovat z'reagovat'
import swal z'sweetalert'
funkceAplikace() {
konst oznámit = () => swal(
 {
 obsah: {
 živel: 'vstup',
 atributy: {
 zástupný symbol: 'Jméno',
 typ: 'text'
 }
 },
 tlačítka: 'Přihlásit se'
 }
 )
vrátit se (

"aplikace">
Klikněte na Me</button>
 </div>
 )
}
vývoznívýchozí Aplikace

V tomto příkladu použijete obsah vlastnost k vykreslení vstupního pole se zástupným textem.

Obsah oznámení určíte pomocí obsah vlastnost a element HTML k vykreslení pomocí živel vlastnictví. Chcete-li zadat atributy prvku HTML, použijte atributy vlastnictví.

Blok kódu výše vykreslí níže uvedené oznámení, když kliknete na prvek tlačítka.

Úprava stylu oznamovací komponenty

Místo abyste se drželi výchozího stylu oznamovacího pole poskytovaného knihovnou SweetAlert, můžete upravit vzhled oznamovacího pole použití vlastních CSS stylů.

Budete používat jméno třídy vlastnost přidat své styly do oznámení. The jméno třídy vlastnost definuje třídu CSS pro oznámení.

Například:

swal(
 {
 titul: 'Ahoj',
 text: 'Vítejte na mé stránce',
 knoflík: Nepravdivé,
 jméno třídy: 'pozor',
 }
 )

Oznámení ve výše uvedeném bloku kódu obsahuje a jméno třídy hodnota upozornění. Po vytvoření oznámení a definování jméno třídy, definujete své styly CSS:

.upozornění{
barva pozadí: zelená;
rodina písem: kurzívní;
hraniční poloměr: 15px;
}

Výše uvedené styly CSS se použijí na oznámení při vykreslování:

Zavření komponenty oznámení

Knihovna SweetAlert poskytuje několik možností, jak přizpůsobit způsob zavírání vašich oznámení. Tyto možnosti jsou closeOnEsc, closeOnClickOutside, a časovač vlastnosti.

The closeOnEsc vlastnost určuje, zda se oznamovací okno zavře, když uživatel stiskne klávesu Esc na své klávesnici. The closeOnEsc vlastnost nabývá booleovskou hodnotu.

swal(
 {
 ...,
 closeOnEsc: Nepravdivé,
 }
 )

Ve výchozím nastavení je closeOnEsc vlastnost je nastavena na skutečný. V bloku kódu výše nastavujete closeOnEsc majetek do Nepravdivé. Nastavením vlastnosti na Nepravdivé, uživatel nemůže zavřít oznamovací okno stisknutím klávesy Esc.

Můžete také určit, zda uživatel může zavřít oznamovací pole kliknutím mimo pole pomocí tlačítka closeOnClickOutside vlastnictví.

Pokud je vlastnost nastavena na skutečný, closeOnClickOutside vlastnost umožňuje zavření oznamovacího pole kliknutím kamkoli mimo něj. Toto je výchozí chování SweetAlert. Chcete-li toto chování zastavit, nastavte closeOnClickOutside majetek do Nepravdivé.

swal(
 {
 ...,
 closeOnClickOutside: Nepravdivé,
 }
 )

s časovač můžete nastavit časový limit, po kterém se okno s upozorněním automaticky zavře. The časovač vlastnost nabývá celočíselné hodnoty v milisekundách.

swal(
 {
 ...,
 časovač: 5000,
 }
 )

V tomto příkladu je časovač vlastnost je nastavena na 5000. Oznámení bude viditelné pouze 5 sekund.

Efektivní vlastní upozornění pomocí SweetAlert

SweetAlert je výkonná knihovna, pomocí které můžete vytvářet přizpůsobená upozornění v aplikaci React. Pomocí knihovny swal nyní můžete vytvářet oznámení s vlastními vlastnostmi a chováním. Můžete také využít jiné knihovny, jako je React-Toastify, k vytvoření vlastních výstrah v aplikaci React.