با استفاده از Mantine، TipTap، Syntax-Highlighter و غیره، برنامه React خود را مانند قبل شارژ کنید
پل نولست در جاوا اسکریپت • 13 ژوئیه 2022 • 2 دقیقه مطالعه
امروز، توجه شما را به 5 مؤلفه UI رایگان سبک وزن جلب می کنم که می توان از آنها برای بهبود تجربه کاربری در وب سایت خود به راحتی استفاده کرد.
Mantine یک کتابخانه کامپوننت‌های React با امکانات کامل است که می‌توان از آن برای ساخت برنامه‌های کاربردی وب در دسترس کاملاً کاربردی استفاده کرد. علاوه بر این، شامل چندین مؤلفه React قابل تنظیم و قلاب با پشتیبانی از حالت Dark بومی است تا شما را در هر شرایطی پوشش دهد. این بر قابلیت استفاده، دسترسی و تجربه توسعه دهنده متمرکز است. Mantine مبتنی بر TypeScript است.
آن را در GitHub پیدا کنید
2. واکنش آسان برش
از react-easy-crop می توان برای برش تصاویر/فیلم ها با تعامل آسان استفاده کرد. از کشیدن، زوم و چرخش تصاویر در هر قالب یا رشته base64 پشتیبانی می کند. همچنین، از هر فرمت ویدیویی که در HTML5 پشتیبانی می شود، پشتیبانی می کند.
علاوه بر این، react-easy-crop یک مؤلفه رابط کاربری سازگار با موبایل است.
آن را در GitHub پیدا کنید
react-colorful یک جزء کوچک انتخابگر رنگ (فقط 2.8 کیلوبایت گیگزیپ شده) برای برنامه‌های React (همچنین Preact) فراهم می‌کند. بدون هیچ وابستگی مطلق، همچنان می‌توان از آن برای داشتن یک انتخابگر رنگ قابل اجرا و سازگار با موبایل که فقط با قلاب‌ها و اجزای کاربردی ساخته شده است، استفاده کرد. همچنین انتخابگر رنگ در TypeScript نوشته شده است و همه انواع را در خود دارد.
آن را در GitHub پیدا کنید
React Syntax Highlighter یک مؤلفه React UI است که با ادغام/ترکیب دو پروژه محبوب: lowlight و refractor، برجسته کردن نحو را در هر برنامه React فعال می‌کند.
برجسته کردن کد با Prism.js و highlight.js با استفاده از سبک های درون خطی به جای تغییر DOM به صورت دستی یا استفاده از آن انجام می شود. dangerouslySetInnerHTML.
آن را در GitHub پیدا کنید
TipTap یک ویرایشگر متن غنی بدون سر و چارچوب است که قابل گسترش است و بر اساس ProseMirror است. این امکان کنترل کامل بر هر جنبه ای از تجربه ویرایشگر متن را فراهم می کند. همچنین، بسیار قابل تنظیم است، با افزونه های زیادی همراه است و کاملاً مستند است.
علاوه بر این، TipTap با جاوا اسکریپت Vanilla کار می کند و همچنین در چندین چارچوب مبتنی بر TypeScript (React، Next.js، Vue، و غیره …) یکپارچه شده است.
آن را در GitHub پیدا کنید
یادداشت های پایانی
امیدوارم این مؤلفه‌های رابط کاربری را دوست داشته باشید و از آنها در پروژه بعدی React خود استفاده کنید.
همچنین، اگر سؤال، ایده، توصیه‌ای دارید یا می‌خواهید مؤلفه رابط کاربری عالی خود را به اشتراک بگذارید، لطفاً آنها را در زیر یادداشت کنید. من سعی می کنم در صورت امکان به سؤال شما پاسخ دهم و توصیه های شما را آزمایش خواهم کرد.
این مقاله در ابتدا در وبلاگ من در https://www.paulsblog.dev/advanced-react-ui-components-to-optimize-development-process/ منتشر شده است.
در وبلاگ من، Medium، LinkedIn، با من در ارتباط باشید. توییترو GitHub.
🙌 از این مطالب حمایت کنید
اگر این محتوا را دوست دارید، لطفاً از من حمایت کنید. می توانید آن را در شبکه های اجتماعی به اشتراک بگذارید یا برای من یک قهوه بخرید! هر گونه حمایت کمک می کند!
علاوه بر این، می توانید در خبرنامه من ثبت نام کنید تا مشارکت خود را در محتوای من نشان دهید. برای همه راه‌های تشکر (رایگان یا پولی) به صفحه مشارکت مراجعه کنید!
با تشکر! 🥰
عکس از Lautaro Andreani / Unsplash
