كيفية إنشاء مكون إعلام مخصص في React باستخدام SweetAlert

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

تثبيت مكتبة SweetAlert

لاستخدام ال سويت أليرت مكتبة لإنشاء الإخطارات ، تحتاج إلى تثبيتها باستخدام أي مدير حزم من اختيارك.

يمكنك تثبيته عبر ملف مدير الحزم NPM عن طريق تشغيل الأمر التالي في جهازك الطرفي:

npm تثبيت sweetalert - حفظ

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

يشبه إنشاء إشعارات مخصصة في تطبيق React باستخدام مكتبة SweetAlert باستخدام مكتبة Toastify. ال سوال الوظيفة التي توفرها مكتبة SweetAlert تنشئ مثيلًا لمكون الإعلام وتحدد خصائص الإشعار.

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

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



انقر فوق لي </button>
 </div>
 )
}
يصدّرتقصير برنامج

سيؤدي النقر فوق الزر إلى استدعاء سوال وظيفة ، والتي ستعرض إشعارًا برسالة "مرحبًا بكم".

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

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

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

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



انقر فوق لي </button>
 </div>
 )
}
يصدّرتقصير برنامج

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

بديل لاستخدام سوال ستكون الوظيفة مع المعلمات الثلاثة هي استخدام سوال تعمل مع معلمة الكائن. تحتوي معلمة الكائن هذه على الخصائص التي تحدد مكون الإعلام.

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

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



انقر فوق لي </button>
 </div>
 )
}
يصدّرتقصير برنامج

في كتلة التعليمات البرمجية أعلاه ، ملف سوال تأخذ الدالة كائنًا بالخصائص التالية: عنوان, نص, أيقونة، و زر.

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

أخيرًا ، زر تحدد الخاصية نص الزر المعروض في الإشعار. في هذه الحالة ، يعرض الزر النص نعم.

تخصيص خاصية الزر

يمكنك تخصيص ملف زر خاصية مكون الإخطار الخاص بك لتناسب احتياجات التصميم الخاصة بك. ال زر تأخذ الخاصية كائنًا بخصائص مستخدمة لتكوين سلوك الزر ومظهره.

يحتوي الزر الافتراضي على الخصائص التالية:

سوال (
 {
 زر: {
 نص: "نعم",
 قيمة: حقيقي,
 مرئي: حقيقي,
 الاسم: "",
 قريب حقيقي
 },
 }
 );

في كتلة التعليمات البرمجية أعلاه ، يتم استخدام الخصائص التالية مع الزر:

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

يمكنك أيضًا عرض أكثر من زر باستخدام مصفوفة بامتداد أزرار ملكية. ستأخذ المصفوفة سلاسل كعناصرها.

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

سوال (
 {
 أزرار: ["يلغي", "نعم"],
 }
 );

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

تقديم عناصر HTML داخل مكون الإعلام

يمكنك أيضًا عرض عناصر HTML بعيدًا عن السلاسل العادية كإشعار. يوفر هذا مجموعة واسعة من خيارات التخصيص.

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

يستورد تتفاعل من'تتفاعل'
يستورد سوال من"سويتالرت"
وظيفةبرنامج() {
مقدار ثابت يخطر = () => سوال (
 {
 محتوى: {
 عنصر: 'مدخل',
 صفات: {
 العنصر النائب: 'الاسم الأول',
 يكتب: 'نص'
 }
 },
 أزرار: 'اشتراك'
 }
 )
يعود (

"برنامج">
انقر فوق لي </button>
 </div>
 )
}
يصدّرتقصير برنامج

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

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

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

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

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

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

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

سوال (
 {
 عنوان: 'أهلاً بك',
 نص: 'أهلا بكم في صفحتي',
 زر: خطأ شنيع,
 الاسم: 'يُحذًِر',
 }
 )

يحتوي الإشعار الموجود في كتلة التعليمات البرمجية أعلاه على ملف اسم الطبقة قيمة يُحذًِر. بعد إنشاء الإشعار وتحديد ملف اسم الطبقة، ستحدد أنماط CSS الخاصة بك:

.يُحذًِر{
لون الخلفية: أخضر;
خط العائلة: مخطوطة;
نصف قطر الحد: 15مقصف;
}

سيتم تطبيق أنماط CSS أعلاه على الإشعار عند العرض:

إغلاق مكون الإعلام

توفر مكتبة SweetAlert عدة خيارات لتخصيص طريقة إغلاق الإشعارات. هذه الخيارات هي اغلاق, closeOnClickOutside، و جهاز ضبط الوقت ملكيات.

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

سوال (
 {
 ...,
 إغلاق: خطأ شنيع,
 }
 )

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

يمكنك أيضًا تحديد ما إذا كان يمكن للمستخدم إغلاق مربع الإشعارات عن طريق النقر خارج المربع باستخدام ملف closeOnClickOutside ملكية.

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

سوال (
 {
 ...,
 closeOnClickOutside: خطأ شنيع,
 }
 )

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

سوال (
 {
 ...,
 مؤقت: 5000,
 }
 )

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

إخطارات مخصصة فعالة باستخدام SweetAlert

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