كيفية إنشاء اشعارات Notification Toast في تطبيقات React

انشاء اشعار في تطبيق رياكت

المقدمة

في تطبيق الويب ، تعد إشعارات التوست طريقة سهلة وفعالة لإعطاء ملاحظات المستخدمين.  يمكن استخدامها لإعلام المستخدمين بالمهام الناجحة أو غير الناجحة ، أو الأخطاء ، أو لمجرد نقل رسالة عامة.  سوف نفحص استخدام حزمة  react-toastify  لتنفيذ إشعارات التوست في تطبيق React.  سأوضح لك في هذه المقالة كيفية استخدام Tailwind لإضافة بعض عناصر التصميم الأنيقة.

المتطلبات الأساسية

 قبل البدء في هذا البرنامج التعليمي ، يجب أن يكون لديك ما يلي:

·        معرفة React و Tailwind.

·        yarn  أو npm مثبتة كمدير للحزم.

 مقدمة عن React الجزء 1

 قم بتثبيت المكتبة

 يجب عليك أولاً تثبيت مكتبة react-toastify قبل أن تتمكن من المتابعة.  قم بتشغيل الأمر التالي في الجهاز الخاص بك لإنجاز ذلك:

npm install react-toastify

او

yarn add react-toastify

قم باستيراد المكتبة

 قبل أن تتمكن من استيراد المكتبة ، يجب عليك أولاً إنشاء مجلد src ، ثم مجلد مكون ، وأخيراً ملف ، سأطلق عليه اسم FormPage.js.  قم بإنشاء ملف يسمى App.js في مجلد src.

 

 بمجرد تثبيت المكتبة ، ستحتاج إلى استيرادها إلى FormPage.js.  يمكنك القيام بذلك عن طريق إضافة السطر التالي من التعليمات البرمجية في الجزء العلوي من ملف المكون الخاص بك:

Import { toast } from 'react-toastify'

بعد ذلك ، قم بإنشاء دالة handleSumit في FormPage.js.  ستكون هذه الوظيفة مسؤولة عن عرض الاشعارات التوست.  داخل الوظيفة ، استخدم وظيفة toast  لعرض الاشعارات.

 

const handleSubmit = (event) => {

  event.preventDefault();

  toast.success("You have registered");

};

 

 

تُستخدم الدالة PreventionDefault عادةً لمنع السلوك الافتراضي لحدث إرسال النموذج.  عند إرسال نموذج ، يكون السلوك الافتراضي هو إرسال طلب إلى الخادم ، مما قد يؤدي إلى إعادة تحميل الصفحة الحالية.  عند إرسال النموذج ، يتم استدعاء دالة handleSubmit ويتم تمرير كائن الحدث كوسيطة.  يتم استدعاء كائن الحدث إلى الطريقة PreventionDefault ، والتي تمنع إرسال النموذج إلى الخادم.  Toast.success هي وظيفة تُستخدم لعرض رسالة نجاح ، أو "toast" ، للمستخدم في تطبيق ويب.

 قم بإنشاء النموذج الخاص بك

 الآن ، تحتاج إلى ربط الدالة handleSumit بحدث في المكون الخاص بك.  قد يكون هذا نقرة على زر ، أو إرسال نموذج ، أو أي نوع آخر من الأحداث.  على سبيل المثال ، لعرض إشعار التوست عند إرسال نموذج ، يمكنك القيام بما يلي في FormPage.js:

const FormPage = () => {
  return (
    <div className="flex justify-center items-center h-screen">
      <div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
        <form onSubmit={handleSubmit}>
          <div className="form-group mb-6">
            <input
              type="text"
              className="form-control block w-full px-3 py-1.5 text-gray-700
              bg-white bg-clip-padding border border-solid border-gray-300
              rounded transition ease-in-out m-0 focus:text-gray-700 
              focus:bg-white focus:border-blue-600 focus:outline-none"
              id="exampleInput90"
              placeholder="Name"
            />
          </div>
          <div className="form-group mb-6">
            <input
              type="email"
              className="form-control block w-full px-3 py-1.5 
              text-gray-700 bg-white bg-clip-padding border border-gray-300 
              rounded transition ease-in-out
              m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 
              focus:outline-none"
              id="exampleInput91"
              placeholder="Email address"
            />
          </div>
          <div className="form-group form-check text-center mb-6">
            <input
              type="checkbox"
              className="form-check-input appearance-none h-4 w-4 border 
              border-gray-300 rounded-sm bg-white checked:bg-blue-600          
              checked:border-blue-600 focus:outline-none transition duration-200
              mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
              id="exampleCheck96"
              checked
            />
            <label
              className="form-check-label inline-block text-gray-800"
              for="exampleCheck96"
            >
              I have read and agreed to the terms.
            </label>
          </div>
          <button
            type="submit"
            className="w-full px-6 py-2.5 bg-blue-600 text-white 
            font-medium text-xs leading-tight uppercase rounded 
            shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700
            focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 
            active:shadow-lg transition duration-150 ease-in-out"
          >
            Subscribe
          </button>
        </form>
      </div>
    </div>
  );
};

إليك كيف سيبدو النموذج الخاص بك على المتصفح.

 

نموذج تسجيل الدخول

تخصيص اشعار التوست

 يمكنك تخصيص مظهر وسلوك إخطارات التوست الخاصة بك عن طريق تمرير الخيارات كوسيطات إلى ToastContainer.  يمكن استخدام ToastContainer على App.js.  قم باستيراد ToastContainer من مكتبة React-toastify.

 

Import { ToastContainer } from "react-toastify"

 

تتضمن بعض الخيارات التي يمكنك استخدامها ما يلي:

" position": يحدد الموضع على الشاشة حيث يجب عرض الإشعار (على سبيل المثال أعلى اليمين ، أسفل اليسار).

"autoClose": يحدد المدة (بالملي ثانية) التي يجب أن يتم خلالها عرض الإشعار قبل إغلاقه تلقائيًا ، في (الإغلاق التلقائي 1000 = 1 ثانية).

"hideProgressBar ": يخفي شريط التقدم الذي يظهر أسفل الإشعار.

" newestOnTop ": تحدد هذه الخاصية المنطقية الترتيب الذي يتم عرض toasts به.

" closeOnClick ": يغلق الإشعار عندما ينقر المستخدم عليه.

" rtl ": التي تعني من اليمين إلى اليسار ، وهي خاصية منطقية تحدد الاتجاه الذي يتم فيه عرض toasts  داخل حاوية toast.

" draggable  ": يجعل الإشعار قابلاً للسحب من قبل المستخدم.

" pauseOnHover ": لإيقاف مؤقت الإغلاق التلقائي عندما يحوم المستخدم فوق الإشعار.

إليك مثال عن كيفية استخدام بعض هذه الخيارات في ToastContainer:

 <ToastContainer 
        position="top-center"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />

سيعرض هذا إشعار نجاح سيتم عرضه لمدة 5 ثوانٍ ، وسحبه من قبل المستخدم ، وإغلاقه عند النقر عليه ، ويحتوي على شريط تقدم مرئي.

اظهار الاشعار

استنتاج

أخيرًا ، يعد React Toast Notification أداة مفيدة لعرض الرسائل المؤقتة للمستخدم بطريقة جذابة بصريًا وقابلة للتخصيص. باتباع الخطوات الموضحة في هذه المقالة ، يجب أن يكون لديك الآن فهم قوي لكيفية استخدام React Toast Notification في مشاريعك الخاصة. سواء كنت ترغب في إخطار المستخدم برسالة نجاح أو خطأ ، أو ببساطة تنبيهه إلى معلومات جديدة ، يمكن أن يساعدك React Toast Notification على القيام بذلك بطريقة احترافية وسهلة الاستخدام. للوصول إلى المستودع الخاص بي ، ما عليك سوى اتباع هذا الرابط https://github.com/Uhiene/Form.git.