معرفی ۱۰ کامپوننت فوق العاده React

کیت رابط کاربری
۱۰ کیت رایگان CSS برای رابط کاربری
فروردین ۳۱, ۱۳۹۸
بهترین تم های وردپرس
۵تا از بهترین تم های وردپرس برای شرکت ها، شخصی، مد، سفر و غیره – ۲۰۱۹
اردیبهشت ۸, ۱۳۹۸
نمایش همه
کامپوننت React

React یکی از محبوب ترین کتابخانه های جاوا اسکریپت هست که توسط فیسبوک توسعه داده شده, این به شما اجازه میده حتی سخت ترین رابط های کاربری رو تبدیل به رابط های ساده کنید و قابلیت استفاده ی مجدد رو داشته باشید. به جای اینکه هرچیزی رو خودتون بسازید, شما میتونید از کامپوننت های خارجی برای افزودن سریع ویژگی ها و عملگرها استفاده کنید.

در این مقاله می خواهیم به معرفی ۱۰ کامپوننت هیجان انگیز React بپردازیم که بصورت فعال آپدیت می شوند و میتونند کمک بزرگی برای پروژه بعدی شما باشند.

React Burger Menu

React-burger-menu شامل یک کامپوننت React سایدبار off-canvas با تعدادی افکت و استایل هست. این همچنین از انیمیشن های مختلفی مثل اسلاید, استک, حباب, push و غیره است. این کامپوننت از ویژگی های CSS۳ مدرن استفاده می کنه, پس بعضی از انیمیشن ها ممکنه در تمام مرورگرها به خوبی نمایش داده نشوند.

React Slick

یک کامپوننت React برای ساخت اسلایدرهای زیبا و واکنش گرا. یک نسخه ی پایه React از slick carousel هست. این تعداد زیادی تنظیمات اسلایدر رو فراهم میکنه که شما میتونید سفارشی سازی  کنید, از جمله چرخش بی نهایت, پخش خودکار, بارگذاری lazy و غیره.

React Google Map

این کامپوننت React برپایه ی Google Maps API هست. درصورتی که نقشه گوگل بارگذاری نشه, این به شما اجازه میده که کامپوننت های متحرک شده رو در نقشه نمایش بدید. با توجه به الگوریتم hover داخلی که داره, شما میتونید هر آبجکتی رو در نقشه hover کنید.

React Photo Gallery

یک گالری تصویر واکنش گرا و فوق العاده قابل تنظیم برای React. این نسبت ابعاد تصاویر شما رو به صورت اورجینال نگه میداره و از عناصر تصویر واقعی استفاده میکنه. همچنین شما میتونید کامپوننت های سفارشی تصویر خودتون رو هم پاس بدید مثلا متن زیرنویس و محبوب ها.

حتما بخوانید   نکات مهم در روانشناسی طراحی اپلیکیشن

React Credit Cards

یک کامپوننت زیبا و مدرن برای کارت های اعتباری که برای فرم های پرداخت استفاده میشه. این شامل یک اعتبارسنج داخلی کارت اعتباری هست که کارت رو چک کرده و نوعش رو شناسایی میکنه. این از تمام کارت های اعتباری موجود در Payment پشتیبانی میکنه.

React Dates

React-dates یک پنل تقویم و انتخاب تاریخ تعاملی, فول امکانات و موبایل پسند است. این همچنین به شما اجازه میده یک تاریخ تکی یا یک محدوده تاریخ رو توسط تنظیمات داخلیش انتخاب کنید. همچنین شما میتونید ورودی ها و تقویم رو به صورت دلخواه تون سفارشی سازی کنید.

React Notification System

یک کامپوننت کامل و قابل تنظیم برای اطلاعیه ها (notifications ) در React. با تنظیمات داخلی اطلاعیه ها شما میتونید عنوان, پیام, مکان, اعمال و تنظیمات دیگر رو انجام بدید. برای رسیدن به ظاهر مطلوب این کامپوننت باید در یک عنصر سطح بالای HTML در اپلیکیشن شما رندر بشهه تا از ناسازگاری های احتمالی جلوگیری بشه.

ReactPlayer

یک کامپوننت React برای پخش ویدیوها از مسیر ها و URL های مختلفی مثل یوتیوب, فیس بوک, توویچ و غیره. این URL رو تجزیه میکنه و sdk های خارجی و کدهای مناسب رو برای پخش ویدیو بارگذاری میکنه. تنظیمات داخلی میتونه برای کنترل میزان صدا, طول و ارتفاع پلیر و غیره به کار برده بشه.

React Beautiful DnD

یک کتابخانه ی React که توسط Atlassian برای ساخت کامپوننت های drag-drop طراحی شده. این یک API تمیز و قدرتمند ارائه میده که بسیار راحت استفاده میشه و تعداد زیادی تنظیمات سفارشی سازی و کنترل ها رو پیشنهاد میده. کامپوننت های تولید شده شامل انیمیشن های نرمی هستند که هنگام برداشتن یا مرتب سازی واکنش های طبیعی دارند.

حتما بخوانید   ساخت اپلیکیشن رایگان وردپرس با افزونه wordapp

React Trend

یک کامپوننت React که توسط تیم Unsplash تهیه شده و میتونه برای ساخت گراف های خطی زیبای مناسب نمایش معیارهای فعالیت و آمارهای مختلف مورد استفاده قرار بگیره. این پروژه از یک رویکرد حداقلی (مینیمالیستی) استفاده میکنه که به شما یک راه حل ساده و تمیز برای یک مشکل خاص میده, پس انتظار یک کتابخانه چارت پیشرفته رو نداشته باشید.

مریم حسینی
مریم حسینی
با همه وجود در تلاش برای رسیدن به موفقیت هستم.