React'te Toastr İle İlgi Çekici Bildirimler Oluşturma

Bildirimler, kullanıcılara önemli bilgiler sağladıkları için herhangi bir web uygulaması için çok önemlidir. Bildirim sistemini sıfırdan kurmak yerine harici kütüphanelerden yararlanabilirsiniz. Toastr, JavaScript uygulamalarında bildirim oluşturmak için kullanılan popüler kitaplıklardan biridir.

Toastr Kitaplığının Kurulumu

Öncelikle, birlikte çalışacağınız bir React uygulaması oluşturarak başlayın. Yapabilirsiniz Vite kullanarak bir React uygulaması oluşturun.

Uygulamayı oluşturduktan sonra, tost makinesi terminalinizde aşağıdaki komutu çalıştırarak projenizde paket oluşturun:

npm install --save toastr

Şimdi yüklediniz tost makinesi paketi ve bildirimleri görüntülemek için kullanabilir.

Toastr Kullanarak Bildirim Oluşturma

Bildirimleri oluşturmak için, tost makinesi işlev. bu tost makinesi işlevi tost mesajları oluşturmak ve görüntülemek için kullanılır. Bildirimlerinizi oluşturmadan önce bildirimlerinizi içe aktardığınızdan emin olun.

tost makinesi CSS dosyanızdaki bildirim stilleri.

@import'toastr';

Burada, kullanarak bir bildirimi nasıl oluşturacağınıza bir örnek verilmiştir. tost makinesi işlev:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Bu örnekte, bir bildirmek işlev. bu Beni tıkla düğmesini çağırır bildirmek üzerine tıkladığınızda çalışır. bu bildirmek işlevi kullanır tost.başarı bir başarı bildirimi görüntülemek için işlev.

bu tost.başarı işlev iki argüman alır. İlk argüman, bu durumda dize olan bildirim mesajıdır. "Sizi burada görmek güzel". İkinci argüman bildirim başlığıdır, "Hoş geldin".

Tıkladığınızda aşağıdaki görsele benzer bir bildirim çıkacaktır. Beni tıkla düğme.

Buna ek olarak tost.başarı işlev, tost makinesi object, bildirim oluşturmak için başka işlevler sağlar. Diğer fonksiyonlar ise tost.hata, tost.uyarı, Ve tost.info. Her işlev, farklı arka plan rengi ve simgesiyle bir bildirim oluşturur, böylece farklı bildirim türlerini kolayca ayırt edebilirsiniz.

Örneğin, kullandığınızda tost.hata işlevi, bildiriminiz şöyle görünecektir:

Bildirimlerinizi Özelleştirme

Toastr kitaplığıyla, bildirimlerinizi geleneksel CSS kullanarak özelleştiremezsiniz. React-Toastify ile çalışırken. Ancak Toastr, bildirimleri özelleştirmek için başka seçenekler sunmaya devam ediyor. Bildirimlerinizin konumunu, görünümünü ve işlevselliğini özelleştirmek için bu seçenekleri kullanabilirsiniz. Seçenekleri üçüncü bağımsız değişkene iletmeniz gerekir. tost makinesi yöntem.

İşte bir örnek:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Bildirimi özelleştirmek için bu kod, KapatDüğmesi, ilerleme çubuğu, zaman aşımı, konumSınıf, metod göster, Ve Yöntemi gizle seçenekler nesnesinin özellikleri. bu KapatDüğmesi özelliği, bildiriminizin bir kapatma düğmesiyle görüntülenip görüntülenmeyeceğini belirler. Bir boolean değeri kabul eder.

Kullanmak ilerleme çubuğu özelliği, bildirime bir ilerleme çubuğu ekleyebilirsiniz. ayarlamak zaman aşımı özelliği, bir bildirimin ne kadar süreyle görüntüleneceğini kontrol etmenizi sağlar. Bu özellik, bildirimin otomatik olarak kaybolmasından önceki milisaniye sayısını belirtir.

bu konumSınıf özelliği, bildirimin ekranınızdaki konumunu tanımlar. Önceden tanımlanmış sekiz değeri kabul eder. Değerler şunları içerir:

• tost-üst-sağ: Bildirimi ekranınızın sağ üst köşesinde görüntüler.
• tost-üst-sol: Bildirim, ekranınızın sol üst köşesinde görüntülenecektir.
• tost üstü merkez: Bildirim, ekranınızın üst orta kısmında görünecektir.
• tost-alt-sağ: Bildirimi ekranınızın sağ alt köşesinde göreceksiniz.
• tost-alt-sol: Bildirim, ekranınızın sol alt köşesine yerleştirilir.
• tost-alt-orta: Bildirimi ekranın alt orta kısmında bulacaksınız.
• tost üstü tam genişlik: Bildirim, ekranınızın üst kısmında görünür ve tüm ekran genişliğini doldurur.
• tost-alt-tam-genişlik: Bildirim, ekranınızın tüm genişliğini kaplar ve altta görüntülenir.

Son olarak, metod göster Ve Yöntemi gizle özellikler, bildirimi görüntülemek ve gizlemek için animasyonları kontrol eder. bu metod göster özelliği, bir bildirimi görüntülemek için kullanılan animasyonu belirtirken, Yöntemi gizle özelliği, bir bildirimi gizlemek için kullanılan animasyonu belirtir.

Yukarıdaki kod bloğunda tanımlanan bildirim, ekranınızın üst orta kısmında bir ilerleme çubuğu ve bir kapatma düğmesiyle birlikte görünecektir. Üç saniye sonra kaybolacak ve belirip kaybolmak için artma ve yavaşlama geçişlerini kullanacaktır.

Bunun gibi bir şey görünecek.

Her Toastr bildirimini teker teker özelleştirmek yerine tek bir options nesnesiyle özelleştirebileceğinizi unutmayın. Bunu yapmak için, tost.seçenekleri mülk. Bu özellik nesnesi, tüm Toastr bildirimlerinizin özelleştirme özelliklerini içerir.

Örneğin:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Bu örnek, tüm bildirimlerin bir ilerleme çubuğuna, bir kapatma düğmesine, sağ üstte bir ekrana sahip olacak şekilde nasıl yapılandırılacağını gösterir. köşesi, 5 saniye sonra otomatik olarak kapanır ve görünür ve yok olmak.

Uygulamayı çalıştırmak ve butonlara tıklamak aşağıdaki görseldeki gibi bir arayüz oluşturacaktır.

Bildirimlerinizi Etkileşimli Hale Getirin

Bildirimlerinizi, üzerlerine tıklama yeteneği gibi etkileşim ekleyerek daha ilgi çekici hale getirebilirsiniz. Bunu yapmak için, tıklamada mülk. bu tıklamada özelliği, Toastr kitaplığının sağladığı özelleştirme seçeneklerinden biridir. Bildirime tıkladığınızda çalışan, şuna benzer bir işlevi belirtir: click olayı (JavaScript'in olay dinleyicilerinden biri).

İşte nasıl kullanılacağına dair bir örnek tıklamada mülk:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Yukarıdaki kod bloğunda, seçenekler nesnesi tost.başarı fonksiyon bir içerir tıklamada mülk. bu tıklamada özellik çağırır tost.temizle bildirimi ekrandan silen işlev.

Toastr Kullanarak İlgi Çekici Bildirimler Oluşturun

Burada, React uygulamanız için ilgi çekici bildirimler oluşturmak üzere Toastr kitaplığını nasıl kullanacağınızı öğrendiniz. Toastr'ı yüklediniz, uygulamanızda ayarladınız ve bildirimlerinizi oluşturup özelleştirdiniz. Toastr, bilgilendirici ve görsel olarak çekici bildirimler oluşturmanıza yardımcı olabilecek güçlü bir kitaplıktır. Toastr dışında SweetAlert, React-Toastify veya Chakra UI gibi diğer kütüphaneleri de deneyebilirsiniz.