Ako vytvoriť vlastný komponent upozornenia v React pomocou SweetAlert

SweetAlert je populárna knižnica, ktorá vám dáva možnosť vytvárať prispôsobené oznamovacie komponenty pre vašu aplikáciu React. Upozornenia môžete použiť na upozorňovanie používateľov na dôležité informácie, chyby alebo úspešné akcie v rámci vašej aplikácie. To prispieva k skvelému používateľskému zážitku.

Inštalácia knižnice SweetAlert

Ak chcete použiť SweetAlert knižnicu na vytváranie upozornení, musíte ju nainštalovať pomocou ľubovoľného správcu balíkov podľa vášho výberu.

Môžete si ho nainštalovať cez Správca balíkov NPM spustením nasledujúceho príkazu vo vašom termináli:

npm nainštalovať sweetalert --uložiť

Používanie SweetAlert na vytváranie upozornení

Vytváranie vlastných upozornení v aplikácii React pomocou knižnice SweetAlert je podobné ako pomocou knižnice Toastify. The swal funkcia poskytovaná knižnicou SweetAlert vytvorí inštanciu komponentu upozornenia a definuje vlastnosti upozornenia.

Tu je príklad použitia swal() funkcia na vytvorenie oznamovacieho komponentu:

importovať Reagovať od'reagovať'
importovať swal od'sweetalert'
funkciuApp() {
konšt oznámiť = () => swal('Ahoj');
vrátiť (



Kliknite na Ja</button>
 </div>
 )
}
exportpredvolená App

Kliknutím na tlačidlo zavoláte swal funkcia, ktorá zobrazí upozornenie so správou „Ahoj“.

The swal funkcia má tri parametre. Prvým parametrom je názov upozornenia, druhým parametrom je správa a tretím je ikona, ktorá sa zobrazí vo vašom upozornení.

Môžete nastaviť ikonu parameter na jednu z preddefinovaných hodnôt, napr. úspech, POZOR, chyba, alebo Info. Ikona upozornenia bude potom založená na hodnotách, ktoré ste odovzdali.

Napríklad:

importovať Reagovať od'reagovať'
importovať swal od'sweetalert'
funkciuApp() {
konšt oznámiť = () => swal('Ahoj', 'Vitajte na mojej stránke', 'úspech');
vrátiť (



Kliknite na Ja</button>
 </div>
 )
}
exportpredvolená App

Keď používateľ klikne na tlačidlo, zavolá sa oznámiť funkciu. Táto funkcia následne zobrazí upozornenie so správou „Ahoj“ a „Vitajte na mojej stránke“ s ikonou úspechu.

Alternatíva k použitiu swal funkciou s tromi parametrami by bolo použiť swal funkciu s parametrom objektu. Tento parameter objektu obsahuje vlastnosti, ktoré definujú komponent notifikácie.

Napríklad:

importovať Reagovať od'reagovať'
importovať swal od'sweetalert'
funkciuApp() {
konšt oznámiť = () => swal(
 {
 názov: 'Ahoj',
 text: 'Vitajte na mojej stránke',
 ikona: 'úspech',
 tlačidlo: 'OK',
 }
 );
vrátiť (



Kliknite na Ja</button>
 </div>
 )
}
exportpredvolená App

Vo vyššie uvedenom bloku kódu je swal funkcia berie objekt s nasledujúcimi vlastnosťami: titul, text, ikonu, a tlačidlo.

The titul vlastnosť špecifikuje názov oznámenia, pričom text vlastnosť definuje správu. S ikonu vlastnosť, môžete určiť typ ikony zobrazenej v upozornení.

Nakoniec, tlačidlo vlastnosť určuje text tlačidla zobrazeného v upozornení. V tomto prípade tlačidlo zobrazí text OK.

Prispôsobenie vlastnosti tlačidla

Môžete prispôsobiť tlačidlo vlastnosti vášho oznamovacieho komponentu, aby vyhovoval vašim potrebám dizajnu. The tlačidlo Vlastnosť berie objekt s vlastnosťami používanými na konfiguráciu správania a vzhľadu tlačidla.

Predvolené tlačidlo obsahuje nasledujúce vlastnosti:

swal(
 {
 tlačidlo: {
 text: "OK",
 hodnota: pravda,
 viditeľné: pravda,
 className: "",
 closeModal: pravda
 },
 }
 );

Vo vyššie uvedenom bloku kódu sa s tlačidlom používajú nasledujúce vlastnosti:

• text: Text, ktorý sa má zobraziť na tlačidle.
• hodnotu: Hodnota, ktorá sa vráti, keď používateľ klikne na tlačidlo. V tomto prípade je hodnota pravda.
• viditeľné: Booleovská hodnota označuje, či má byť tlačidlo viditeľné.
• className: Reťazec predstavujúci triedu CSS, ktorá sa má použiť na tlačidlo.
• closeModal: Booleovská hodnota označujúca, či sa má modálny režim zatvoriť po kliknutí na tlačidlo.

Môžete tiež vykresliť viac ako jedno tlačidlo pomocou poľa s tlačidlá nehnuteľnosť. Pole bude mať ako svoje prvky reťazce.

Napríklad:

swal(
 {
 tlačidlá: ["Zrušiť", "ok"],
 }
 );

V tomto príklade bude váš oznamovací komponent obsahovať dve tlačidlá s textami Zrušiť a Dobre. Nastavenie tlačidlá majetok do falošný vygeneruje upozornenie bez tlačidla.

Vykresľovanie prvkov HTML vo vnútri oznamovacieho komponentu

Ako upozornenie môžete vykresliť aj prvky HTML okrem obyčajných reťazcov. To poskytuje širokú škálu možností prispôsobenia.

Napríklad:

importovať Reagovať od'reagovať'
importovať swal od'sweetalert'
funkciuApp() {
konšt oznámiť = () => swal(
 {
 obsah: {
 element: 'vstup',
 atribúty: {
 zástupný symbol: 'Krstné meno',
 typ: 'text'
 }
 },
 tlačidlá: 'Prihlásiť Se'
 }
 )
vrátiť (

"aplikácia">
Kliknite na Ja</button>
 </div>
 )
}
exportpredvolená App

V tomto príklade použijete obsahu vlastnosť na vykreslenie vstupného poľa so zástupným textom.

Obsah oznámenia špecifikujete pomocou obsahu vlastnosť a prvok HTML na vykreslenie pomocou element nehnuteľnosť. Ak chcete zadať atribúty prvku HTML, použite atribúty nehnuteľnosť.

Vyššie uvedený blok kódu zobrazí po kliknutí na prvok tlačidla nižšie uvedené upozornenie.

Úprava štýlu komponentu upozornení

Namiesto dodržiavania predvoleného štýlu oznamovacieho poľa poskytovaného knižnicou SweetAlert si môžete prispôsobiť vzhľad oznamovacieho poľa použitie vlastných CSS štýlov.

Budete používať className vlastnosť na pridanie vašich štýlov do upozornenia. The className vlastnosť definuje triedu CSS pre oznámenie.

Napríklad:

swal(
 {
 názov: 'Ahoj',
 text: 'Vitajte na mojej stránke',
 tlačidlo: falošný,
 className: 'upozornenie',
 }
 )

Oznámenie v bloku kódu vyššie obsahuje a className hodnotu upozorniť. Po vytvorení oznámenia a definovaní className, definujete svoje CSS štýly:

.upozornenie{
farba pozadia: zelená;
font-family: kurzíva;
hraničný polomer: 15px;
}

Vyššie uvedené štýly CSS sa použijú na oznámenie pri vykreslení:

Zatvorenie komponentu upozornení

Knižnica SweetAlert poskytuje niekoľko možností na prispôsobenie spôsobu, akým sa vaše upozornenia zatvárajú. Tieto možnosti sú closeOnEsc, closeOnClickOutside, a časovač vlastnosti.

The closeOnEsc určuje, či sa oznamovacie pole zatvorí, keď používateľ stlačí kláves Esc na klávesnici. The closeOnEsc vlastnosť nadobúda boolovskú hodnotu.

swal(
 {
 ...,
 closeOnEsc: falošný,
 }
 )

V predvolenom nastavení je closeOnEsc vlastnosť je nastavená na pravda. V bloku kódu vyššie nastavujete closeOnEsc majetok do falošný. Nastavením vlastnosti na falošný, používateľ nemôže zatvoriť okno s upozorneniami stlačením klávesu Esc.

Môžete tiež určiť, či môže používateľ zatvoriť okno s upozornením kliknutím mimo rámčeka pomocou tlačidla closeOnClickOutside nehnuteľnosť.

Ak je vlastnosť nastavená na pravda, closeOnClickOutside vlastnosť umožňuje zatvorenie oznamovacieho poľa kliknutím kdekoľvek mimo neho. Toto je predvolené správanie SweetAlert. Ak chcete zastaviť toto správanie, nastavte closeOnClickOutside majetok do falošný.

swal(
 {
 ...,
 closeOnClickOutside: falošný,
 }
 )

S časovač môžete nastaviť časový limit, po ktorom sa okno s upozorneniami automaticky zatvorí. The časovač vlastnosť nadobúda celočíselné hodnoty v milisekundách.

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

V tomto príklade časovač vlastnosť je nastavená na 5000. Upozornenie bude viditeľné iba 5 sekúnd.

Efektívne vlastné upozornenia pomocou SweetAlert

SweetAlert je výkonná knižnica, pomocou ktorej môžete vytvárať prispôsobené upozornenia v aplikácii React. Používanie knižnice swal teraz môžete vytvárať upozornenia s vlastnými vlastnosťami a správaním. Na vytváranie vlastných upozornení v aplikácii React môžete využiť aj iné knižnice, ako je React-Toastify.