SweetAlert Kullanarak React'te Özel Bildirim Bileşeni Nasıl Oluşturulur

SweetAlert, React uygulamanız için özelleştirilmiş bildirim bileşenleri oluşturma olanağı sağlayan popüler bir kitaplıktır. Uygulamanızdaki önemli bilgiler, hatalar veya başarılı eylemler hakkında kullanıcıları uyarmak için bildirimleri kullanabilirsiniz. Bu, harika bir kullanıcı deneyimi sağlar.

SweetAlert Kitaplığının Kurulumu

kullanmak için tatlı uyarısı bildirim oluşturmak için kitaplığı, seçtiğiniz herhangi bir paket yöneticisini kullanarak yüklemeniz gerekir.

aracılığıyla kurabilirsiniz. NPM paket yöneticisi terminalinizde aşağıdaki komutu çalıştırarak:

npm sweetalert'ı kur -- kaydet

Bildirim Oluşturmak için SweetAlert'i Kullanma

SweetAlert kitaplığını kullanarak React uygulamanızda özel bildirimler oluşturmak şuna benzer: Toastify kütüphanesini kullanma. bu yutmak SweetAlert kitaplığı tarafından sağlanan işlev, bildirim bileşeninin bir örneğini oluşturur ve bildirimin özelliklerini tanımlar.

İşte kullanımına bir örnek yutmak() bir bildirim bileşeni oluşturma işlevi:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak yutmak itibaren'tatlım'
işlevUygulama() {
sabit bildir = () => yutmak('Selamlar');
geri dönmek (



Bana tıklayın</button>
 </div>
 )
}
ihracatvarsayılan Uygulama

Düğmeye tıklamak yutmak "Merhaba" mesajı ile bir bildirim görüntüleyecek olan işlev.

bu yutmak fonksiyon üç parametre alır. İlk parametre bildirimin başlığı, ikinci parametre mesaj ve üçüncü parametre bildiriminizde görüntülenecek simgedir.

ayarlayabilirsiniz simge önceden tanımlanmış değerlerden birine parametre, yani, başarı, uyarı, hata, veya bilgi. Bildirim simgesi, ilettiğiniz değerlere dayalı olacaktır.

Örneğin:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak yutmak itibaren'tatlım'
işlevUygulama() {
sabit bildir = () => yutmak('Selamlar', 'Sayfama hoşgeldiniz', 'başarı');
geri dönmek (



Bana tıklayın</button>
 </div>
 )
}
ihracatvarsayılan Uygulama

Kullanıcı düğmeye tıkladığında, bildirmek işlev. Bu işlev daha sonra "Merhaba" mesajı ve bir başarı simgesiyle "Sayfama Hoş Geldiniz" mesajı içeren bir bildirim görüntüler.

kullanmanın bir alternatifi yutmak üç parametreli işlev, yutmak object parametresi ile işlev. Bu nesne parametresi, bildirim bileşenini tanımlayan özellikleri içerir.

Örneğin:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak yutmak itibaren'tatlım'
işlevUygulama() {
sabit bildir = () => yutmak(
 {
 başlık: 'Selamlar',
 metin: 'Sayfama hoşgeldiniz',
 simge: 'başarı',
 düğme: 'TAMAM',
 }
 );
geri dönmek (



Bana tıklayın</button>
 </div>
 )
}
ihracatvarsayılan Uygulama

Yukarıdaki kod bloğunda, yutmak işlev, aşağıdaki özelliklere sahip bir nesne alır: başlık, metin, simge, Ve düğme.

bu başlık özelliği bildirimin başlığını belirtirken, metin özellik mesajı tanımlar. İle simge özelliğini kullanarak, bildirimde görüntülenen simge türünü belirleyebilirsiniz.

Son olarak, düğme özelliği, bildirimde görüntülenen düğmenin metnini belirtir. Bu durumda, düğme metni görüntüler TAMAM.

Düğme Özelliğini Özelleştirme

özelleştirebilirsiniz düğme bildirim bileşeninizin özelliği, tasarım gereksinimlerinize uyacak şekilde. bu düğme özelliği, düğmenin davranışını ve görünümünü yapılandırmak için kullanılan özelliklere sahip bir nesne alır.

Bir varsayılan düğme aşağıdaki özellikleri içerir:

yutmak(
 {
 düğme: {
 metin: "TAMAM",
 değer: doğru,
 görünür: doğru,
 sınıf adı: "",
 KapatModal: doğru
 },
 }
 );

Yukarıdaki kod bloğunda, buton ile aşağıdaki özellikler kullanılır:

• metin: Düğmede görüntülenecek metin.
• değer: Kullanıcı düğmeyi tıkladığında döndürülecek değer. Bu durumda, değer doğru.
• görünür: Bir boole değeri, düğmenin görünür olup olmayacağını belirtir.
• sınıf adı: Düğmeye uygulanacak CSS sınıfını temsil eden bir dize.
• kapatKip: Butona tıklandığında modalın kapatılması gerekip gerekmediğini gösteren bir boole değeri.

Ayrıca, bir dizi kullanarak birden fazla düğmeyi de oluşturabilirsiniz. düğmeler mülk. Dizi, dizeleri öğeleri olarak alacaktır.

Örneğin:

yutmak(
 {
 düğmeler: ["İptal etmek", "Tamam"],
 }
 );

Bu örnekte, bildirim bileşeniniz 'metinlerini içeren iki düğme içerecektir. iptal etmek Ve Tamam. ayarlamak düğmeler mülkiyet YANLIŞ düğme olmadan bir bildirim verecektir.

Bildirim Bileşeni İçinde HTML Öğelerini Oluşturma

Düz dizelerin dışında HTML öğelerini de bir bildirim olarak işleyebilirsiniz. Bu, çok çeşitli özelleştirme seçenekleri sunar.

Örneğin:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak yutmak itibaren'tatlım'
işlevUygulama() {
sabit bildir = () => yutmak(
 {
 içerik: {
 öğe: 'giriş',
 Öznitellikler: {
 Yer tutucu: 'İlk adı',
 tip: 'metin'
 }
 },
 düğmeler: 'Üye olmak'
 }
 )
geri dönmek (

"uygulama">
Bana tıklayın</button>
 </div>
 )
}
ihracatvarsayılan Uygulama

Bu örnekte, içerik yer tutucu metin içeren bir giriş alanı oluşturma özelliği.

kullanarak bildirimin içeriğini belirtirsiniz. içerik özelliği ve HTML öğesi ile oluşturulacak eleman mülk. HTML öğesinin niteliklerini belirtmek için, Öznitellikler mülk.

Yukarıdaki kod bloğu, düğme öğesini tıkladığınızda aşağıdaki bildirimi oluşturacaktır.

Bildirim Bileşenini Şekillendirme

SweetAlert kitaplığı tarafından sağlanan varsayılan bildirim kutusu stiline bağlı kalmak yerine, bildirim kutusunun görünümünü şu şekilde özelleştirebilirsiniz: kendi CSS stillerinizi uygulama.

kullanacaksın sınıf adı stillerinizi bildirime eklemek için özellik. bu sınıf adı özelliği, bildirim için bir CSS sınıfı tanımlar.

Örneğin:

yutmak(
 {
 başlık: 'Selamlar',
 metin: 'Sayfama hoşgeldiniz',
 düğme: YANLIŞ,
 sınıf adı: 'uyarı',
 }
 )

Yukarıdaki kod bloğundaki bildirimde bir sınıf adı değer uyarı. Bildirimi oluşturup tanımladıktan sonra sınıf adı, CSS stillerinizi tanımlayacaksınız:

.uyarı{
arka plan rengi: yeşil;
font ailesi: el yazısı;
sınır yarıçapı: 15piksel;
}

Yukarıdaki CSS stilleri, oluşturma sırasındaki bildirime uygulanacaktır:

Bildirim Bileşenini Kapatma

SweetAlert kitaplığı, bildirimlerinizin kapatılma şeklini özelleştirmek için çeşitli seçenekler sunar. Bu seçenekler kapatOnEsc, KapatOnClickOutside, Ve zamanlayıcı özellikler.

bu kapatOnEsc özelliği, kullanıcı klavyesinde Esc tuşuna bastığında bildirim kutusunun kapanıp kapanmayacağını belirler. bu kapatOnEsc özellik bir boole değeri alır.

yutmak(
 {
 ...,
 kapatOnEsc: YANLIŞ,
 }
 )

varsayılan olarak, kapatOnEsc özellik şu şekilde ayarlandı: doğru. Yukarıdaki kod bloğunda, kapatOnEsc mülkiyet YANLIŞ. Özelliği ayarlayarak YANLIŞ, kullanıcı Esc tuşuna basarak bildirim kutusunu kapatamaz.

Kullanıcının, kutunun dışına tıklayarak bildirim kutusunu kapatıp kapatamayacağını da belirleyebilirsiniz. KapatOnClickOutside mülk.

Özellik olarak ayarlanırsa doğru, KapatOnClickOutside özelliği, bildirim kutusunun dışında herhangi bir yere tıklanarak kapatılmasını sağlar. Bu, SweetAlert'in varsayılan davranışıdır. Bu davranışı durdurmak için, KapatOnClickOutside mülkiyet YANLIŞ.

yutmak(
 {
 ...,
 CloseOnClickOutside: YANLIŞ,
 }
 )

İle zamanlayıcı özelliği, bildirim kutusunun kendini otomatik olarak kapatması için bir zaman sınırı belirleyebilirsiniz. bu zamanlayıcı property, milisaniye cinsinden bir tamsayı değeri alır.

yutmak(
 {
 ...,
 zamanlayıcı: 5000,
 }
 )

Bu örnekte, zamanlayıcı özellik şu şekilde ayarlandı: 5000. Bildirim yalnızca 5 saniye görünür olacaktır.

SweetAlert Kullanarak Etkili Özel Bildirimler

SweetAlert, bir React uygulamasında özelleştirilmiş bildirimler oluşturabileceğiniz güçlü bir kitaplıktır. Kitaplığın kullanılması yutmak işlevi, artık özel özellikler ve davranışlarla bildirimler oluşturabilirsiniz. Bir React uygulamasında özel uyarılar oluşturmak için React-Toastify gibi diğer kitaplıklardan da yararlanabilirsiniz.