كيفية إنشاء تنبيهات مخصصة في React باستخدام React-Toastify

غالبًا ما تُستخدم رسائل التنبيه في تطبيقات الويب لعرض التحذيرات والأخطاء ورسائل النجاح وغيرها من المعلومات القيمة.

هناك عدد قليل من الحزم والأطر الشائعة لعمل رسائل تنبيه في React. React-Toastify هي مكتبة React تتيح لك إضافة إشعارات ورسائل تنبيه إلى تطبيقاتك.

تثبيت React Toastify

لتثبيت Toastify في مشروع React الخاص بك ، قم بتشغيل هذا الأمر في دليل المشروع الخاص بك:

تثبيت npm - حفظ رد الفعل المحمص

إعداد توستيفي

لاستخدام حزمة Toastify ، ستحتاج إلى استيراد ملف توست كونتينر, خبز محمص وملف CSS المصاحب الذي توفره الحزمة.

ال توست كونتينر داخل مكون التطبيق يخزن جميع إخطارات التوست التي تم إنشاؤها.

يستورد {ToastContainer، toast} من"رد الفعل المحمص";
يستورد"رد فعل-توستيفي / توزيع / ReactToastify.css";
وظيفةبرنامج() {
يعود(



 </div>
 );
}

يمكنك استخدام ال خبز محمص طرق لإنشاء إشعارات نخب لمشروع React الخاص بك:

وظيفةبرنامج() {
مقدار ثابت يخطر = () => نخب. النجاح ("أهلاً بك!");
يعود(


يخطر </button>

 </div>
 );
}

سيؤدي النقر فوق الزر الذي ينشئه هذا الرمز إلى استدعاء نخب. النجاح طريقة تمريرها "مرحبًا بكم!" خيط. سيؤدي هذا إلى إنشاء إشعار نخب يعرض الرسالة على الشاشة ، مثل هذا:

لاحظ أن هناك أنواعًا مختلفة من طرق الخبز المحمص التي يمكنك الاتصال بها ، مثل toast.info (), نخب. خطأ (), toast.success (), توست. تحذير (). تحتوي كل طريقة من هذه الطرق على بعض أنماط الألوان الدقيقة لتعكس نوع الرسالة.

تحديد المواقع الخاصة بك نخب الإخطارات

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

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

وظيفةبرنامج() {
مقدار ثابت يخطر = () => نخب. النجاح ("أهلاً بك!");
يعود(


يخطر </button>
"أعلى اليسار"/>
 </div>
 );
}

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

يمكنك تغيير الوضع الافتراضي لإخطارات التوست الفردية باستخدام دعامة الموضع الخاصة بـ خبز محمص طُرق:

وظيفةبرنامج() {
مقدار ثابت يخطر = () => نخب. النجاح ("أهلاً بك!", {موضع: خبز محمص. POSITION.TOP_CENTER}) ،
يعود(


يخطر </button>
"أعلى اليسار"/>
 </div>
 );
}

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

التعامل مع دعامة الإغلاق التلقائي لطريقة التوست وحاوية التوست

يمكنك تغيير وقت عرض إخطارات الخبز المحمص. يمكنك التحكم في مدة بقاء إخطار التوست مفتوحًا باستخدام ملف على مقربة السيارات دعم. يمكنك تغيير وقت التأخير لجميع إخطارات التوست وإخطارات التوست الخاصة بكل فرد. ال على مقربة السيارات تقبل الخاصية فقط القيمة المنطقية false أو المدة بالمللي ثانية.

لتغيير وقت التأخير لجميع إخطارات التوست ، استخدم على مقربة السيارات دعم داخل توست كونتينر عنصر.

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

وظيفةبرنامج() {
مقدار ثابت يخطر = () => نخب. النجاح ("أهلاً بك!");
يعود(


يخطر </button>
5000}/>
 </div>
 );
}

باستخدام الإعدادات المذكورة أعلاه ، سيتم عرض جميع إشعارات التوست لمدة خمس ثوانٍ بالضبط (5000 مللي ثانية).

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

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

وظيفةبرنامج() {
مقدار ثابت notifyOne = () => toast.info ("سيغلق في غضون 10 ثوانٍ", {على مقربة السيارات: 10000});
مقدار ثابت notifyTwo = () => toast.info ("سيغلق خلال 15 ثانية", {على مقربة السيارات: 15000});
يعود (


يخطر واحد </button>
يخطر اثنان </button>

 </div>
 );
}

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

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

وظيفةبرنامج() {
مقدار ثابت يخطر = () => toast.info ("أهلاً بك!");
يعود (


يخطر </button>
خطأ شنيع} />
 </div>
 );
}

وضع على مقربة السيارات دعامة فردية خبز محمص طرق ل خطأ شنيع سيضمن أيضًا أن تلك الإخطارات المحمصة المحددة لا تغلق افتراضيًا.

تقديم الإخطارات غير المتسلسلة مع Toastify

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

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

وظيفةرسالة({toastProps، closeToast}) {
يعود (


مرحبًا {toastProps.position} </p>
</button>
 </div>
 )
}
يصدّرتقصير رسالة؛

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

قم باستيراد مكون الرسالة ، ثم مرره إلى وظيفة toast () ، مما يجعله بمثابة إشعار نخب:

يستورد {ToastContainer، toast} من"رد الفعل المحمص";
يستورد"رد فعل-توستيفي / توزيع / ReactToastify.css";
يستورد رسالة من"./components/Message";
وظيفةبرنامج() {
مقدار ثابت msg = () => خبز محمص(<رسالة />);
يعود (


مرحبًا </button>

 </div>
 );
}

سيؤدي النقر فوق الزر إلى ظهور إشعار يحتوي على سؤال وزرين على الشاشة.

تصفيف نخب الإخطارات

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

لتصميم إخطار التوست الخاص بك ، قم بإعطائه ملف اسم الطبقة و قم بتطبيق التخصيصات داخل ملف CSS.

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

وظيفةبرنامج() {
مقدار ثابت يخطر = () => نخب. النجاح ("أهلاً بك!", {اسم الطبقة: "رسالة نخب"});
يعود (


يخطر </button>
"مركز أعلى" />
 </div>
 );
}

مع ال اسم الطبقة مرفقًا بإخطارك ، يمكنك نمط إخطار التوست حسب تفضيلاتك داخل ملف CSS:

.toast-message {
لون الخلفية: #000000;
لون: #FFFFFF;
حجم الخط: 20مقصف;
حشوة: 1rem 0.5rem;
}

نتيجة للتصميم المخصص أعلاه ، سيبدو الإشعار كما يلي:

نخب الإخطارات لتطبيق الويب الخاص بك

يمكنك الآن إنشاء تنبيهات مخصصة في React باستخدام حزمة React-Toastify وطرقها المتاحة. من خلال تصميم هذه التنبيهات / الإخطارات المخصصة حسب تفضيلاتك ، يمكنك تحسين تجربة المستخدم لتطبيق الويب الخاص بك.

يوفر React-Toastify طريقة سريعة وفعالة لتضمين التنبيهات المخصصة في مشروع React الخاص بك دون عناء.