Egyéni értesítési komponens létrehozása a Reactban a SweetAlert használatával

A SweetAlert egy népszerű könyvtár, amely lehetővé teszi személyre szabott értesítési összetevők létrehozását a React alkalmazáshoz. Az értesítések segítségével figyelmeztetheti a felhasználókat az alkalmazáson belüli fontos információkról, hibákról vagy sikeres műveletekről. Ez nagyszerű felhasználói élményt biztosít.

A SweetAlert Library telepítése

Használatához a SweetAlert könyvtárat az értesítések létrehozásához, telepítenie kell bármelyik csomagkezelővel, amelyet választott.

A következőn keresztül telepítheti NPM csomagkezelő a következő parancs futtatásával a terminálon:

npm install sweetalert --save

A SweetAlert használata értesítések létrehozásához

Az egyéni értesítések létrehozása a React alkalmazásban a SweetAlert könyvtár használatával hasonló a következőhöz: a Toastify könyvtár használatával. A fecske A SweetAlert könyvtár által biztosított funkció létrehozza az értesítési összetevő egy példányát, és meghatározza az értesítés tulajdonságait.

Íme egy példa a swal() függvény értesítési összetevő létrehozásához:

import Reagál tól től'reagál'
import fecske tól től'sweetalert'
funkcióApp() {
const értesíteni = () => nyel('Szia');
Visszatérés (



Kattintson az Én< gombra/button>
 </div>
 )
}
exportalapértelmezett App

A gombra kattintva meghívja a fecske funkciót, amely egy értesítést jelenít meg a "Hello There" üzenettel.

A fecske függvény három paramétert vesz fel. Az első paraméter az értesítés címe, a második paraméter az üzenet, a harmadik pedig az értesítésben megjelenő ikon.

Beállíthatja a ikon paramétert az előre meghatározott értékek egyikére, pl. siker, Figyelem, hiba, vagy info. Az értesítési ikon ezután az átadott értékeken fog alapulni.

Például:

import Reagál tól től'reagál'
import fecske tól től'sweetalert'
funkcióApp() {
const értesíteni = () => nyel('Szia', 'Üdvözöllek az oldalamon', 'siker');
Visszatérés (



Kattintson az Én< gombra/button>
 </div>
 )
}
exportalapértelmezett App

Amikor a felhasználó rákattint a gombra, meghívja a értesítse funkció. Ez a funkció ezután egy értesítést jelenít meg a „Helló” és „Üdvözlünk az oldalamon” üzenettel, egy siker ikonnal.

Alternatív megoldása a fecske függvény a három paraméterrel az lenne, hogy a fecske függvényt az objektum paraméterrel. Ez az objektumparaméter olyan tulajdonságokat tartalmaz, amelyek meghatározzák az értesítési összetevőt.

Például:

import Reagál tól től'reagál'
import fecske tól től'sweetalert'
funkcióApp() {
const értesíteni = () => nyel(
 {
 cím: 'Szia',
 szöveg: 'Üdvözöllek az oldalamon',
 ikon: 'siker',
 gomb: 'RENDBEN',
 }
 );
Visszatérés (



Kattintson az Én< gombra/button>
 </div>
 )
}
exportalapértelmezett App

A fenti kódblokkban a fecske függvény a következő tulajdonságokkal rendelkező objektumot vesz fel: cím, szöveg, ikon, és gomb.

A cím tulajdonság megadja az értesítés címét, míg a szöveg tulajdonság határozza meg az üzenetet. A... val ikon tulajdonsággal, megadhatja az értesítésben megjelenített ikon típusát.

Végül a gomb tulajdonság határozza meg az értesítésben megjelenő gomb szövegét. Ebben az esetben a gomb megjeleníti a szöveget rendben.

A gomb tulajdonságainak testreszabása

Testreszabhatja a gomb az értesítési összetevő tulajdonsága, hogy megfeleljen az Ön tervezési igényeinek. A gomb A property a gomb viselkedésének és megjelenésének konfigurálásához használt tulajdonságokkal rendelkező objektumot vesz fel.

Az alapértelmezett gomb a következő tulajdonságokat tartalmazza:

nyel(
 {
 gomb: {
 szöveg: "RENDBEN",
 érték: igaz,
 látható: igaz,
 osztály név: "",
 closeModal: igaz
 },
 }
 );

A fenti kódblokkban a következő tulajdonságok használatosak a gombbal:

• szöveg: A gombon megjelenítendő szöveg.
• érték: Az az érték, amely akkor tér vissza, amikor a felhasználó rákattint a gombra. Ebben az esetben az érték igaz.
• látható: Logikai érték jelzi, hogy a gombnak láthatónak kell-e lennie.
• osztály név: A gombra alkalmazandó CSS-osztályt képviselő karakterlánc.
• closeModal: Logikai érték, amely jelzi, hogy a modált be kell-e zárni, amikor a gombra kattintanak.

Egynél több gombot is megjeleníthet egy tömb használatával a gombokat ingatlan. A tömb elemei karakterláncok lesznek.

Például:

nyel(
 {
 gombok: ["Megszünteti", "Rendben"],
 }
 );

Ebben a példában az értesítési összetevő két gombot fog tartalmazni a következő szövegekkel: megszünteti és Rendben. Beállítása a gombokat tulajdonát hamis értesítést küld gomb nélkül.

HTML-elemek megjelenítése az értesítési komponensen belül

Az egyszerű karakterláncokon kívül HTML-elemeket is megjeleníthet értesítésként. Ez a testreszabási lehetőségek széles skáláját kínálja.

Például:

import Reagál tól től'reagál'
import fecske tól től'sweetalert'
funkcióApp() {
const értesíteni = () => nyel(
 {
 tartalom: {
 elem: 'bemenet',
 attribútumok: {
 helykitöltő: 'Keresztnév',
 típus: 'szöveg'
 }
 },
 gombok: 'Regisztrálj'
 }
 )
Visszatérés (

"alkalmazás">
Kattintson az Én< gombra/button>
 </div>
 )
}
exportalapértelmezett App

Ebben a példában a tartalom tulajdonság egy beviteli mező megjelenítéséhez helyőrző szöveggel.

Az értesítés tartalmát a segítségével adja meg tartalom tulajdonságot és a HTML elemet, amellyel a elem ingatlan. A HTML elem attribútumainak megadásához használja a attribútumok ingatlan.

A fenti kódblokk az alábbi értesítést jeleníti meg, amikor a gombelemre kattint.

Az értesítési összetevő stílusának beállítása

Ahelyett, hogy ragaszkodna a SweetAlert könyvtár által biztosított alapértelmezett értesítési mező stílusához, testreszabhatja az értesítési mező megjelenését saját CSS stílusok alkalmazása.

Használni fogja a osztály név tulajdonságot, hogy hozzáadja stílusait az értesítéshez. A osztály név tulajdonság meghatároz egy CSS-osztályt az értesítéshez.

Például:

nyel(
 {
 cím: 'Szia',
 szöveg: 'Üdvözöllek az oldalamon',
 gomb: hamis,
 osztály név: 'éber',
 }
 )

A fenti kódblokkban lévő értesítésnek a osztály név érték éber. Az értesítés létrehozása és a osztály név, akkor meghatározhatja a CSS-stílusait:

.éber{
háttérszín: zöld;
betűtípus család: kurzív;
határ-sugár: 15px;
}

A fenti CSS-stílusok vonatkoznak a renderelési értesítésre:

Az értesítési komponens bezárása

A SweetAlert könyvtár számos lehetőséget kínál az értesítések bezárásának testreszabására. Ezek a lehetőségek a closeOnEsc, closeOnClickOutside, és időzítő tulajdonságait.

A closeOnEsc tulajdonság határozza meg, hogy az értesítési mező bezárul-e, amikor a felhasználó megnyomja az Esc billentyűt a billentyűzetén. A closeOnEsc tulajdonság logikai értéket vesz fel.

nyel(
 {
 ...,
 closeOnEsc: hamis,
 }
 )

Alapértelmezés szerint a closeOnEsc tulajdonság értékre van állítva igaz. A fenti kódblokkban beállítja a closeOnEsc tulajdonát hamis. A tulajdonság beállításával hamis, a felhasználó nem zárhatja be az értesítési mezőt az Esc billentyű lenyomásával.

Azt is meghatározhatja, hogy a felhasználó bezárhatja-e az értesítési mezőt, ha a dobozon kívülre kattint a gombbal closeOnClickOutside ingatlan.

Ha a tulajdonság be van állítva igaz, a closeOnClickOutside tulajdonság lehetővé teszi az értesítési mező bezárását, ha rákattint bárhová azon kívül. Ez a SweetAlert alapértelmezett viselkedése. Ennek a viselkedésnek a leállításához állítsa be a closeOnClickOutside tulajdonát hamis.

nyel(
 {
 ...,
 closeOnClickOutside: hamis,
 }
 )

A... val időzítő tulajdonságot, beállíthat egy határidőt arra, hogy az értesítési mező automatikusan bezáruljon. A időzítő tulajdonság egész értéket vesz fel ezredmásodpercben.

nyel(
 {
 ...,
 időzítő: 5000,
 }
 )

Ebben a példában a időzítő tulajdonság értékre van állítva 5000. Az értesítés csak 5 másodpercig lesz látható.

Hatékony egyéni értesítések a SweetAlert használatával

A SweetAlert egy hatékony könyvtár, amelynek segítségével személyre szabott értesítéseket hozhat létre a React alkalmazásban. A könyvtár használata fecske funkciót, mostantól egyéni tulajdonságokkal és viselkedéssel is létrehozhat értesítéseket. Használhat más könyvtárakat is, például a React-Toastify-t, hogy egyéni riasztásokat hozzon létre egy React alkalmazásban.