Next Js - React Toastify Bildirim Sistemi

2 Eylül 2024

#Yazılım#React#Next.Js#React-Toastify

Bu yazımızda sizlere React uygulamalarında kullanıcıya bildirim araçlarından en popüler ve en basit olanlarından birisini, React-Toastify aracını anlatacağız. React-Toastify aracını Next Js uygulamalarında nasıl basit bir şekilde kullanılabileceği kosnunda bilgi vereceğiz.

Öncelikle son kullanıcıya yaptığı işlem konusunda bilgi vermek, hatalı işlem yaptığında uyarmak, yaptığı ekleme, silme veya güncelleme işlem sonucunu ona bildirmek, bazı işlemlerde bekleme süresini göstermek, uygulmanızın kullanıcı dostu olmasını sağlamaktadır. Aynı zamanda kullanıcıları işlerini daha sorunsuz yapmaları ve bu sayde daha doğru bir veri yapınızın olması sağlanmaktadır.

Şimdi adım adım kullanımını gösterelim.

1. Adım - Öncelikle React-Toastify eklentisini npm üzerinden yükleyelim.

npm insall react-toastify

2. Adım - Ract toastify tüm uygulama genelindende kullanacağınızı varsayıyorum. Bunun için app klasörü içerisindeki ana Layout dosyanıza yerleştirmemiz gerekiyor.

Layout klasörünüzde stil dosyası ile toast-container dosyasını indirelim

import { ToastContainer } from"react-toastify";
import"react-toastify/dist/ReactToastify.css";

3. Adım - Layout dosyamızda,

<html lang="en">

  <body className={myFont.className}>

    <AuthProvider>

      {children}

      <ToastContainer

         closeOnClick

         autoClose={1500}

         position="top-right"

         theme="light"

         pauseOnHover
      />

    </AuthProvider>

   </body>
</html>

Yukarıda ki kodda gördüğünüz üzere ToastContainer'i Layout dosyamızda {children} 'ın altına yerleştirdik. Buradan çıkcak bildirim genel ayarlarını yapabiliriz. Örneğin burada autoClose={1500} demişiz. Yani 1,5 sanie sonra otomatik kapan diyoruz. position="top-right" demişiz. Yani bildirim kutucuğu ekranın sağ üst kısmında çıksın demişiz. Bunun gibi çok fazla yara yapabiliriz. Default ayarları ve ekleyebileceğiniz tüm diğer ayarları eklentinin npm sayfasından görebiliri ve yapabilirsiniz.

4. Adım - Şimdi artık kullanım durumumuza göre nasıl yerleştirebileceğimizi gösterelim. Öncelikle kullanacağımız sayfada eklentinin "toast" özelliğini indiriyoruz.

import { toast } from"react-toastify";

Sonrasında da sayfa içerisinde kullacağımız yerde aşağıdaki şekilde bir başarılı mesaj ve success yerine error diyerek bir hata mesajı gösterebiliriz.

toast.success("Mesajınız");

Evet hepsi bu kadar. Oldukça basit bir şekilde mesajınızı gösterebilirsiniz.

Bunlara ilave oalrak daha detaylı bir şekilde şu şekilde de kullanabilirsiniz.

İlave İçerik - Diyelim backend veya veritabınından gelen mesajları göstermek istiyosunuz. Buradan size gösterilecek mesaj ile işlem durumu (olumlu veya olumsuz) geliyor. Çoğu durumda bu şekilde kullanılabilir. Bunun için öncelikle uygulama genelinde kullanacağım yardımcı fonksiyon sayfası yazıyorum.

import { toast } from"react-toastify";

export const handleResponseMsg = (res:any) => {
  if (res.status) {
    toast.success(res.msg);
  } else {
    toast.error(res.msg);
  }
};

Bu fonksiyonu uyglama genelinde kullanabiliyorum. Backend veya veritabanı işleminden gelen response'u direk bu fonksiyondan geçiriyorum. Örnek üzerinden gösterelim. Diyelim bir delete fonksiyonu yazdınız. Backend'den gelen cevapbı direk yazdığımız yardımcı fonksiyondan geçiriyoruz, oda bize cevabın statüsü ve mesajına göre meaj kutucuğunu çıkartıyor. Oldukça pratik bir çözüm oluyor.

const deleteHandler = async({ id }: { id:string }) => {
      const res = await deleteThing(id);
      handleResponseMsg(res);
      setData(res.data);
};

Bu örneği aşağıdaki şekilde hem yardımcı fonksiyon hem de direk toast kullanarak da genişletebiliriz. Burada, backend bağlantısında sıkıntı olursa ve cevap alamazsak normal toast kullanıyoruz ve kullanıcıyı bilgilendiriyoruz. Backend'den cevap alırsak, cevabı fonksiyondan geçirip yine toast eklentisini kullanmış oluyoruz.

const deleteHandler =async ({ id }: { id:string }) => {
    try {
      const res = await deleteThing(id);
      handleResponseMsg(res);
      setData(res.data);
    } catch (error) {
      toast.error("Silinemedi, bir hata oluştu");
    }
  };

React-Toastify, daha bir çok şekilde kullanılabilir ve özelleştirilebilir. Oldukça pratik ve güzel bir çözüm sunuyor. Her sayfaya da eklenmesi gerekmiyor. Sadece layout sayasına ekleyerek olayı çözüyorsunuz.

Bu yazımızda burada sonra eriyor. Konu ile alakalı, soru, sorun, öneri ve katkılarınız olursa aşağıya yorum olarak yazabilir veya iletişim kısmından bize gönderebilirsiniz.