React یکی از محبوب ترین کتابخانه های جاوا اسکریپت هست که توسط فیسبوک توسعه داده شده, این به شما اجازه میده حتی سخت ترین رابط های کاربری رو تبدیل به رابط های ساده کنید و قابلیت استفاده ی مجدد رو داشته باشید. به جای اینکه هرچیزی رو خودتون بسازید, شما میتونید از کامپوننت های خارجی برای افزودن سریع ویژگی ها و عملگرها استفاده کنید.
در این مقاله می خواهیم به معرفی ۱۰ کامپوننت هیجان انگیز React بپردازیم که بصورت فعال آپدیت می شوند و میتونند کمک بزرگی برای پروژه بعدی شما باشند.
React-burger-menu شامل یک کامپوننت React سایدبار off-canvas با تعدادی افکت و استایل هست. این همچنین از انیمیشن های مختلفی مثل اسلاید, استک, حباب, push و غیره است. این کامپوننت از ویژگی های CSS۳ مدرن استفاده می کنه, پس بعضی از انیمیشن ها ممکنه در تمام مرورگرها به خوبی نمایش داده نشوند.
یک کامپوننت React برای ساخت اسلایدرهای زیبا و واکنش گرا. یک نسخه ی پایه React از slick carousel هست. این تعداد زیادی تنظیمات اسلایدر رو فراهم میکنه که شما میتونید سفارشی سازی کنید, از جمله چرخش بی نهایت, پخش خودکار, بارگذاری lazy و غیره.
این کامپوننت React برپایه ی Google Maps API هست. درصورتی که نقشه گوگل بارگذاری نشه, این به شما اجازه میده که کامپوننت های متحرک شده رو در نقشه نمایش بدید. با توجه به الگوریتم hover داخلی که داره, شما میتونید هر آبجکتی رو در نقشه hover کنید.
یک گالری تصویر واکنش گرا و فوق العاده قابل تنظیم برای React. این نسبت ابعاد تصاویر شما رو به صورت اورجینال نگه میداره و از عناصر تصویر واقعی استفاده میکنه. همچنین شما میتونید کامپوننت های سفارشی تصویر خودتون رو هم پاس بدید مثلا متن زیرنویس و محبوب ها.
یک کامپوننت زیبا و مدرن برای کارت های اعتباری که برای فرم های پرداخت استفاده میشه. این شامل یک اعتبارسنج داخلی کارت اعتباری هست که کارت رو چک کرده و نوعش رو شناسایی میکنه. این از تمام کارت های اعتباری موجود در Payment پشتیبانی میکنه.
React-dates یک پنل تقویم و انتخاب تاریخ تعاملی, فول امکانات و موبایل پسند است. این همچنین به شما اجازه میده یک تاریخ تکی یا یک محدوده تاریخ رو توسط تنظیمات داخلیش انتخاب کنید. همچنین شما میتونید ورودی ها و تقویم رو به صورت دلخواه تون سفارشی سازی کنید.
یک کامپوننت کامل و قابل تنظیم برای اطلاعیه ها (notifications ) در React. با تنظیمات داخلی اطلاعیه ها شما میتونید عنوان, پیام, مکان, اعمال و تنظیمات دیگر رو انجام بدید. برای رسیدن به ظاهر مطلوب این کامپوننت باید در یک عنصر سطح بالای HTML در اپلیکیشن شما رندر بشهه تا از ناسازگاری های احتمالی جلوگیری بشه.
یک کامپوننت React برای پخش ویدیوها از مسیر ها و URL های مختلفی مثل یوتیوب, فیس بوک, توویچ و غیره. این URL رو تجزیه میکنه و sdk های خارجی و کدهای مناسب رو برای پخش ویدیو بارگذاری میکنه. تنظیمات داخلی میتونه برای کنترل میزان صدا, طول و ارتفاع پلیر و غیره به کار برده بشه.
یک کتابخانه ی React که توسط Atlassian برای ساخت کامپوننت های drag-drop طراحی شده. این یک API تمیز و قدرتمند ارائه میده که بسیار راحت استفاده میشه و تعداد زیادی تنظیمات سفارشی سازی و کنترل ها رو پیشنهاد میده. کامپوننت های تولید شده شامل انیمیشن های نرمی هستند که هنگام برداشتن یا مرتب سازی واکنش های طبیعی دارند.
یک کامپوننت React که توسط تیم Unsplash تهیه شده و میتونه برای ساخت گراف های خطی زیبای مناسب نمایش معیارهای فعالیت و آمارهای مختلف مورد استفاده قرار بگیره. این پروژه از یک رویکرد حداقلی (مینیمالیستی) استفاده میکنه که به شما یک راه حل ساده و تمیز برای یک مشکل خاص میده, پس انتظار یک کتابخانه چارت پیشرفته رو نداشته باشید.