إنشاء إخطارات تفاعلية مع Toastr في React

تعتبر الإخطارات ضرورية لأي تطبيق ويب لأنها تزود المستخدمين بمعلومات مهمة. بدلاً من إنشاء نظام الإشعارات من البداية ، يمكنك الاستفادة من المكتبات الخارجية. Toastr هي إحدى المكتبات الشهيرة لإنشاء إشعارات في تطبيقات JavaScript.

تركيب مكتبة التوستر

أولاً ، ابدأ بإنشاء تطبيق React الذي ستعمل معه. أنت تستطيع قم بإنشاء تطبيق React باستخدام Vite.

بعد إنشاء التطبيق ، قم بتثبيت ملف توستر package في مشروعك عن طريق تشغيل الأمر التالي في جهازك الطرفي:

npm install --save toastr

الآن قمت بتثبيت توستر الحزمة ويمكن استخدامه لعرض الإخطارات.

إنشاء الإخطارات باستخدام Toastr

لإنشاء الإخطارات ، سوف تستخدم ملف توستر وظيفة. ال توستر يتم استخدام الوظيفة لإنشاء وعرض رسائل التوست. قبل إنشاء الإشعارات ، تأكد من استيراد ملف توستر أنماط الإشعارات في ملف CSS الخاص بك.

@import'toastr';

فيما يلي مثال على كيفية إنشاء إشعار باستخدام ملف توستر وظيفة:

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>
 );
}





instagram viewer
exportdefault App;

في هذا المثال ، تقوم بتعريف ملف يخطر وظيفة. ال انقر فوق لي زر المكالمات يخطر تعمل عند النقر فوقه. ال يخطر تستخدم الوظيفة ال toastr.success. نجاح وظيفة لعرض إخطار النجاح.

ال toastr.success. نجاح تأخذ الوظيفة حجتين. الوسيطة الأولى هي رسالة الإعلام والتي ، في هذه الحالة ، هي السلسلة "من الجيد أن تكون هنا". الوسيطة الثانية هي عنوان الإخطار ، "مرحباً".

سيظهر إشعار مشابه للصورة التالية عند النقر فوق انقر فوق لي زر.

بالإضافة الى toastr.success. نجاح وظيفة توستر يوفر الكائن وظائف أخرى لإنشاء الإخطارات. الوظائف الأخرى هي toastr. خطأ, توستر. تحذير، و toastr.info. تنشئ كل وظيفة إشعارًا بلون وأيقونة خلفية مختلفة ، بحيث يمكنك بسهولة التمييز بين أنواع الإشعارات المختلفة.

على سبيل المثال ، عند استخدام ملف toastr. خطأ وظيفة ، سيبدو إشعارك كما يلي:

تخصيص الإخطارات الخاصة بك

باستخدام مكتبة Toastr ، لا يمكنك تخصيص إشعاراتك باستخدام CSS التقليدية ، على عكس عند العمل مع React-Toastify. ومع ذلك ، لا يزال Toastr يوفر خيارات أخرى لتخصيص الإشعارات. يمكنك استخدام هذه الخيارات لتخصيص موضع الإشعارات وشكلها ووظائفها. تحتاج إلى تمرير الخيارات إلى الوسيطة الثالثة من توستر طريقة.

هنا مثال:

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;

لتخصيص الإشعار ، يستخدم هذا الرمز الامتداد زر الاغلاق, شريط التقدم, نفذ الوقت, الموضع, طريقة العرض، و طريقة الإخفاء خصائص كائن الخيارات. ال زر الاغلاق تحدد الخاصية ما إذا كان سيتم عرض الإشعار الخاص بك مع زر الإغلاق. يقبل قيمة منطقية.

باستخدام شريط التقدم الخاصية ، يمكنك إضافة شريط التقدم إلى الإعلام. وضع نفذ الوقت تتيح لك الخاصية التحكم في مدة عرض الإخطار. تحدد هذه الخاصية عدد المللي ثانية قبل أن يختفي الإعلام تلقائيًا.

ال الموضع تحدد الخاصية موضع الإشعار على شاشتك. يقبل ثماني قيم محددة مسبقًا. القيم تشمل:

• نخب أعلى اليمين: يعرض الإشعار في الزاوية اليمنى العليا من شاشتك.
• نخب أعلى اليسار: سيظهر الإشعار في الزاوية العلوية اليسرى من شاشتك.
• نخب أعلى وسط: سيظهر الإشعار في أعلى منتصف الشاشة.
• نخب أسفل اليمين: سترى الإشعار في الزاوية اليمنى السفلية من شاشتك.
• نخب أسفل اليسار: يتم وضع الإشعار في الزاوية السفلية اليسرى من شاشتك.
• نخب وسط القاع: سوف تجد الإخطار في أسفل وسط الشاشة.
• نخب أعلى كامل العرض: يظهر الإشعار أعلى الشاشة ، ويملأ عرض الشاشة بالكامل.
• نخب القاع كامل العرض: يملأ الإشعار عرض شاشتك بالكامل ويتم عرضه في الأسفل.

أخيرًا ، طريقة العرض و طريقة الإخفاء تتحكم الخصائص في الرسوم المتحركة لعرض الإخطار وإخفائه. ال طريقة العرض تحدد الخاصية الرسوم المتحركة المستخدمة لعرض إشعار ، في حين أن ملف طريقة الإخفاء تحدد الخاصية الرسوم المتحركة المستخدمة لإخفاء الإخطار.

سيظهر الإشعار المحدد في كتلة التعليمات البرمجية أعلاه في الجزء العلوي الأوسط من شاشتك ، مع شريط تقدم وزر إغلاق. سيختفي بعد ثلاث ثوانٍ ويستخدم انتقالات التلاشي والتلاشي للظهور والاختفاء.

سيبدو شيئا من هذا القبيل.

لاحظ أنه يمكنك تخصيص كل إخطار Toastr باستخدام كائن خيارات واحد بدلاً من تخصيصه واحدًا تلو الآخر. للقيام بذلك ، سوف تستخدم ملف toastr.options ملكية. يحتوي كائن الخاصية هذا على خصائص التخصيص لجميع إخطارات Toastr الخاصة بك.

على سبيل المثال:

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;

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

سيؤدي تشغيل التطبيق والنقر فوق الأزرار إلى عرض واجهة تشبه الصورة أدناه.

اجعل إخطاراتك تفاعلية

يمكنك جعل إشعاراتك أكثر جاذبية من خلال إضافة تفاعل ، مثل القدرة على النقر عليها. للقيام بذلك ، يمكنك استخدام ملف عند النقر ملكية. ال عند النقر الخاصية هي إحدى خيارات التخصيص التي توفرها مكتبة Toastr. تحدد وظيفة يتم تشغيلها عند النقر فوق الإشعار ، على غرار ملف انقر فوق الحدث (أحد أدوات الاستماع إلى أحداث جافا سكريبت).

فيما يلي مثال على كيفية استخدام ملف عند النقر ملكية:

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;

في كتلة التعليمات البرمجية أعلاه ، يكون كائن الخيارات لـ toastr.success. نجاح تحتوي الوظيفة على ملف عند النقر ملكية. ال عند النقر تستدعي الخاصية ال توستر واضح وظيفة ، والتي تمسح الإخطار من الشاشة.

إنشاء إخطارات جذابة باستخدام Toastr

تعلمت هنا كيفية استخدام مكتبة Toastr لإنشاء إشعارات جذابة لتطبيق React الخاص بك. لقد قمت بتثبيت Toastr ، وقمت بإعداده في تطبيقك ، وقمت بإنشاء وتخصيص إشعاراتك. Toastr هي مكتبة قوية يمكنها مساعدتك في إنشاء إشعارات غنية بالمعلومات وجذابة بصريًا. بصرف النظر عن Toastr ، يمكنك أيضًا تجربة مكتبات أخرى مثل SweetAlert أو React-Toastify أو Chakra UI.