React-Toastify Kullanarak React'te Özel Uyarılar Nasıl Oluşturulur

Uyarı mesajları genellikle web uygulamalarında uyarıları, hataları, başarı mesajlarını ve diğer değerli bilgileri görüntülemek için kullanılır.

React'te uyarı mesajları oluşturmak için birkaç popüler paket ve çerçeve vardır. React-Toastify, uygulamalarınıza bildirimler ve uyarı mesajları eklemenizi sağlayan bir React kitaplığıdır.

React Toastify'ı Kurmak

Toastify'ı React projenize kurmak için proje dizininizde şu komutu çalıştırın:

npm install --save tepki-toastify

Toastify'ı Ayarlama

Toastify paketini kullanmak için, Tost Kabı, kızarmış ekmek yöntem ve paket tarafından sağlanan beraberindeki CSS dosyası.

bu Tost Kabı App bileşeninin içinde, oluşturulan tüm tost bildirimlerini saklar.

içe aktarmak { ToastContainer, kızarmış ekmek } itibaren"tepki-toastify";
içe aktarmak"react-toastify/dist/ReactToastify.css";
işlevUygulama() {
geri dönmek(



 </div>
 );
}

kullanabilirsiniz kızarmış ekmek React projeniz için tost bildirimleri oluşturma yöntemleri:

işlevUygulama() {
sabit bildir = () => tost.başarı("Selamlar!");
geri dönmek(


bildir</button>

 </div>
 );
}

Bu kodun oluşturduğu butona tıklamak tost.başarı yöntemi, "Merhaba Orada!" sicim. Bu, mesajı ekranda şu şekilde görüntüleyen bir tost bildirimi oluşturacaktır:

gibi arayabileceğiniz farklı tost yöntemleri olduğunu unutmayın. tost.bilgi(), tost.hata(), tost.başarı(), tost.uyarı(). Bu yöntemlerin her biri, mesajın türünü yansıtmak için bazı ince renk stillerine sahiptir.

Tost Bildirimlerinizi Konumlandırma

Varsayılan olarak, web uygulaması ekranının sağ üst tarafından tost bildirimleri açılır. Bunu, konum özelliğini ayarlayarak değiştirebilirsiniz. Tost Kabı. Kullanılabilir altı konum değeri vardır: sağ üst, üst orta, sol üst, sağ alt, orta alt ve sol alt.

Örneğin:

işlevUygulama() {
sabit bildir = () => tost.başarı("Selamlar!");
geri dönmek(


bildir</button>
"Sol üst"/>
 </div>
 );
}

Pozisyon desteğinin ayarlanması Tost Kabı sol üste, tüm bildirimlerin ekranın sol üst tarafından açılmasını sağlar.

Tek tek tost bildirimleri için varsayılan konumu, konum pervanesini kullanarak değiştirebilirsiniz. kızarmış ekmek yöntemler:

işlevUygulama() {
sabit bildir = () => tost.başarı("Selamlar!", {konum: kızarmış ekmek. KONUM.TOP_CENTER});
geri dönmek(


bildir</button>
"Sol üst"/>
 </div>
 );
}

Tost bildirimlerini de konumlandırabilirsiniz. CSS pozisyon özelliğini kullanma, ancak Toastify'ın konum desteği, bunu yapmanın standart yoludur.

Toast Metodu ve ToastContainer'ın autoClose Prop'unu Kullanma

Tost bildirimlerinin görüntülenme süresini değiştirebilirsiniz. Bir tost bildiriminin ne kadar süreyle açık kalacağını kontrol edebilirsiniz. Otomatik kapanma pervane Tüm bildirimler ve kişiye özel bildirimler için gecikme süresini değiştirebilirsiniz. bu Otomatik kapanma prop yalnızca false boolean değerini veya milisaniye cinsinden bir süreyi kabul eder.

Tüm tost bildirimlerinin gecikme süresini değiştirmek için Otomatik kapanma içinde pervane Tost Kabı eleman.

Örneğin:

işlevUygulama() {
sabit bildir = () => tost.başarı("Selamlar!");
geri dönmek(


bildir</button>
5000}/>
 </div>
 );
}

Yukarıdaki ayarlarla, tüm tost bildirimleri tam olarak beş saniye (5.000 milisaniye) boyunca görüntülenecektir.

Kullanmak Otomatik kapanma her birinin özelliği kızarmış ekmek yöntemiyle, bireysel tost bildirimleri için gecikme süresini özelleştirebilirsiniz.

Örneğin:

işlevUygulama() {
sabit Birine haber ver = () => tost.bilgi("10 saniye sonra kapanacak", {Otomatik kapanma: 10000});
sabit notifyTwo = () => tost.bilgi("15 saniye sonra kapanacak", {Otomatik kapanma: 15000});
geri dönmek (


Birine Bildir</button>
İkiye Bildir</button>

 </div>
 );
}

Tost bildiriminin varsayılan olarak kapanmasını önlemek için, Otomatik kapanma desteklemek YANLIŞ. ayarlayarak kullanıcının her bildirimi manuel olarak kapatmasını sağlayabilirsiniz. Otomatik kapanma pervane Tost Kabı yanlış.

Örneğin:

işlevUygulama() {
sabit bildir = () => tost.bilgi("Selamlar!");
geri dönmek (


bildir</button>
YANLIŞ} />
 </div>
 );
}

ayarlamak Otomatik kapanma bireysel pervane kızarmış ekmek yöntemleri YANLIŞ ayrıca, bu belirli tost bildirimlerinin varsayılan olarak kapanmamasını da sağlayacaktır.

Toastify ile Dizgisiz Bildirimleri Oluşturma

Tost bildirimleriyle çalışırken dizeleri, tepki bileşenlerini ve sayıları bildirim mesajları olarak işleyebilirsiniz. Bir React bileşenini tost bildirimi olarak işlemek için, bileşeni yaratır ve bir kızarmış ekmek yöntem.

Örneğin:

işlevİleti({toastProps, yakınToast}) {
geri dönmek (


{toastProps.position}/p>
</button>
 </div>
 )
}
ihracatvarsayılan İleti;

Bu kod bloğu bir bileşen oluşturur, İleti. Bir bileşeni bildirim olarak işlerken tost ekler kızarmış ekmek Ve kapatToast bileşeninize destek. bu kapatToast prop, bildirimi kapatmak için kullanabileceğiniz bir işlevdir. bu kızarmış ekmek prop, konumu, türü ve diğer özellikleri dahil olmak üzere tost bildirimiyle ilgili ayrıntıları depolayan özelliklere sahip bir nesnedir.

Message bileşenini içe aktarın, ardından onu bir tost bildirimi olarak işleyerek, tost() işlevine iletin:

içe aktarmak { ToastContainer, kızarmış ekmek } itibaren"tepki-toastify";
içe aktarmak"react-toastify/dist/ReactToastify.css";
içe aktarmak İleti itibaren"./bileşenler/Mesaj";
işlevUygulama() {
sabit mesaj = () => kızarmış ekmek(<İleti />);
geri dönmek (


hoşgeldiniz</button>

 </div>
 );
}

Düğmeye tıklamak, ekranınızda bir soru ve iki düğme içeren bir bildirimin görüntülenmesine neden olur.

Stil Tost Bildirimleri

Tost bildirimleriniz için varsayılan stili kullanmak zorunda değilsiniz. Bunları, web uygulamanıza uygun, istenen bir tasarım temasına veya modeline uyacak şekilde özelleştirebilirsiniz.

Tost bildiriminizi biçimlendirmek için ona bir sınıf adı Ve özelleştirmeleri bir CSS dosyası içinde uygulayın.

Örneğin:

işlevUygulama() {
sabit bildir = () => tost.başarı("Selamlar!", {sınıf adı: "tost mesajı"});
geri dönmek (


bildir</button>
"üst merkez" />
 </div>
 );
}

İle sınıf adı bildiriminize eklenmiş olarak, CSS dosyası içinde tost bildirimini tercihinize göre şekillendirebilirsiniz:

.toast mesajı {
arka plan rengi: #000000;
renk: #FFFFFF;
yazı Boyutu: 20piksel;
dolgu malzemesi: 1rem 0.5rem;
}

Yukarıdaki özel stilin bir sonucu olarak, bildirim şu şekilde görünecektir:

Web Uygulamanız için Tost Bildirimleri

Artık React-Toastify paketini ve mevcut yöntemlerini kullanarak React'te özel uyarılar oluşturabilirsiniz. Bu özel uyarıları/bildirimleri tercihinize göre şekillendirerek web uygulamanızın kullanıcı deneyimini geliştirebilirsiniz.

React-Toastify, özel uyarıları React projenize zahmetsizce dahil etmek için hızlı ve etkili bir yöntem sunar.