ماهي react hot toast

React Hot Toast هي مكتبة JavaScript تُستخدم لإظهار الإشعارات (notifications) أو الرسائل المنبثقة في تطبيقات React. مثلاً إظهار رسائل تأكيد العمليات، رسائل الخطأ، وحالات التحميل بطريقة أنيقة وغير مزعجة. هي بديل ممتاز لـ alert() التقليدي أو مكتبات الإشعارات الأخرى الأكثر تعقيداً.

ويمكنك الذهاب للرابط التالي ورؤية الأمثلة والشرح المبسط لهذه المكتبة
https://react-hot-toast.com/

مكتبة خاصة بإضافة إشعارات ذات تصميم جميل، وبشكل سريع سهل مع إمكانية التخصيص، وتلك الإشعارات تُعرف باسم Toasts، وهي الرسائل الصغيرة التي تظهر في زاوية الشاشة لإعلام المستخدم بشيء ما حدث، مثل تم الحفظ بنجاح، حدث خطأ، أو جاري التحميل.

ومن خلالها تستطيع عرض إشعار بسطر كود واحد فقط:

import toast, { Toaster } from 'react-hot-toast';

const notify = () => toast('تم الحفظ بنجاح!');

function App() {
  return (
    <div>
      <button onClick={notify}>احفظ</button>
      <Toaster /> 
    </div>
  );
}

كذلك تدعم الـ Promises وتلك من أقوى ميزاتها، أي بسهولة بإمكانك عرض إشعارات مختلفة بناءًا على حالة الـ Promise، بمعنى جاري التنفيذ، نجاح أو فشل، وذلك مناسب للعمليات غير المتزامنة مثل طلبات API.

const myPromise = fetchData(); 

toast.promise(myPromise, {
   loading: 'جاري الحفظ...',
   success: <b>تم الحفظ بنجاح!</b>,
   error: <b>فشل الحفظ.</b>,
 });

وللعلم يوجد مكتبة أخرى وهي React-Toastify بها خيارات تخصيص متقدمة جدًا، كتغيير شكل شريط التقدم وغيره من التخصيصات.