🏢 👩🏿‍🤝‍👩🏾 🧜🏾 10 مكونات تفاعل لجميع المناسبات 🆖 🛌🏽 ➡️

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

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

المواد ، التي ننشر ترجمتها اليوم ، مخصصة لقصة 10 مكونات تفاعلية.

1. رد فعل Slider Awesome - "دائري"

يتيح لك مكون React Awesome Slider إنشاء انتقالات سلسة وجميلة وقابلة للتخصيص بدرجة كبيرة. هذا مكون صغير جدًا (7 كيلوبايت) يدعمه كل المتصفحات الرئيسية. هذه صفحة تجريبية لـ React Awesome Slider.

2. تفاعل شبكة البيانات - الجداول

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

3. CogoToast - الإخطارات

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

4. رد فعل خرائط جوجل - خرائط

Google Maps React هو مكون شائع إلى حد ما يسرع ويسهل وضع (مع إحداثيات) مكونات React الأخرى على خريطة Google.

5. تلميح رد الفعل - تلميحات الأدوات

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

6. رد فعل كتلة واجهة المستخدم - شاشات التحميل والحجب

React Block UI هو مكون سهل الاستخدام يمنع المستخدمين من التفاعل مع واجهة الصفحة أثناء تحميل أي شيء.

7. رد فعل بطاقات الائتمان - نموذج لإدخال بيانات الدفع

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

8. React Markdown - تقديم ترميز Markdown

React Markdown هو حل سريع ومناسب لعرض ترميز Markdown (بما في ذلك HTML). يمكنه ، مثل المكونات الأخرى من هذا الاستعراض ، حل مشكلة واحدة فقط ، لكنه يؤدي وظيفته بشكل جيد للغاية.

9. Coloreact - أداة لاختيار الألوان

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

10. رد فعل التقويم الكبير - التقويم

إذا كنت بحاجة إلى مكون تقويم مجهز بجميع الميزات الموجودة في التقاويم "الاحترافية" - فهذا يعني أنه يجب عليك إلقاء نظرة على React Big Calendar . يمنح المطور الكثير من الفرص والإعدادات - وظائف الجدولة ، التعريب ، تنسيق التاريخ والوقت ، وأكثر من ذلك بكثير.

القراء الأعزاء! ما هي مكونات رد الفعل عالية التخصص التي تستخدمها غالبًا؟

10 مكونات تفاعل لجميع المناسبات