60 بهترین کتابخانه JavaScript برای ساخت مؤلفه های تعاملی UI

این لیست ابزارهایی را برای ساختن همه چیز از دکمه های ساده گرفته تا شبکه های داده پیچیده و انیمیشن ها پوشش می دهد. بر اساس نیازهای پروژه خود (سازگاری چارچوب ، عملکرد یا سفارشی سازی) را انتخاب کنید.

صبر کنید ، قبل از اینکه دیگر بروید.

لطفاً با چالش جلوی من از من پشتیبانی کنید ، روی پیوند زیر کلیک کنید:

زبان عشق خود را تجسم و کشف کنید

چارچوب های اصلی و کتابخانه های کامپوننت

1. واکنش نشان دادن
   reactjs.org یک کتابخانه اعلامی برای ساخت UI های مبتنی بر مؤلفه.
2. مشاهده. js
   چارچوب مترقی vuejs.org برای ایجاد رابط های واکنشی.
3. زاویه دار
   Angular.io چارچوب تمام عیار با اتصال داده های دو طرفه.
4. سولف
   چارچوب کامپایلر SVELTE.DEV برای اجزای لاغر و سریع.
5. پیش بینی کردن
   preactjs.com جایگزین واکنش سبک وزن (3KB).
6. جامد
   SolidJS.com نحو واکنش مانند با واکنش ریز دانه.
7. روشن
   Lit.dev سریع و کتابخانه مؤلفه وب سبک.
8. alpine.js
   Alpinejs.dev چارچوب حداقل برای تعامل DOM اعلامیه.
9. استنسیل
   کامپایلر stenciljs.com برای تولید اجزای وب.

کتابخانه های مؤلفه UI

1. Material-UI (MUI)
   MUI.com به دنبال طراحی مواد Google واکنش نشان می دهد.
2. طراحی مورچه
   کتابخانه ui ant.design-level-level.
3. چاکرا
   chakra-ui.com اجزای React ماژولار در دسترس است.
4. رابط معنایی
   اجزای UI بصری Semantic-ui.com با نحو زبان طبیعی.
5. UI بدون سر
   headlessui.com مؤلفه های غیرقابل دسترسی و در دسترس برای React/Vue.
6. uri
   Radix-ui.com ابتدایی برای ساخت UI های قابل دسترسی و قابل تنظیم.
7. قصور
   چارچوب مبتنی بر Vue quasar.dev برای برنامه های متقابل پلاک.
8. دزدی کردن
   Vuetifyjs.com اجزای طراحی مواد برای VUE.
9. پرایمر
   PrimeFaces.org/primeReact قطعات UI غنی برای React.
10. مجموعه
    کتابخانه Rsuitejs.com برای سیستم های سازمانی واکنش نشان می دهد.

انیمیشن و حرکت

1. حرکت قاب
   framer.com/motion انیمیشن های آماده تولید برای React.
2. GSAP (Greensock)
   Greensock.com/gsap ابزار انیمیشن با عملکرد بالا.
3. بهار واکنش نشان می دهد
   React-spring.dev انیمیشن های مبتنی بر فیزیک بهار.
4. anime.js
   Animejs.com موتور انیمیشن JavaScript سبک وزن.
5. AOS (Animate on Scroll)
   ichalsnik.github.io/aos انیمیشن های پراکنده شده.

تجسم داده ها و نمودارها

1. d3.js
   D3JS.org دستکاری اسناد قدرتمند داده محور.
2. نمودار. js
   ChartJs.org نمودارهای ساده و انعطاف پذیر با بوم.
3. Three.js
   کتابخانه گرافیکی سه بعدی برای WebGL.
4. پیروزی
   foreable.com/open-source/victory مؤلفه های React برای داده ها.
5. مجدداً
   recharts.org کتابخانه نمودار اعلامیه برای واکنش.

کشیدن و افت

1. واکنش DND
   React-dnd.github.io برنامه های Drag-and-Drop برای React.
2. کشنده
   Shopify.github.io/draggable کتابخانه ماژولار Drag-and-Drop.
3. sortable.js
   sortablejs.github.io/sortable لیست های قابل تنظیم با حداقل کد.

فرم ها و اعتبار سنجی

1. وابسته به شکل
   Formik.org مدیریت فرم را با اعتبار سنجی واکنش نشان می دهد.
2. React Form Hook
   React-hook-form.com با استفاده از قلاب های React فرم های اجرا.
3. یوم
   github.com/jquense/yup اعتبار سنجی طرحواره برای JavaScript.
4. زود
   اعتبار سنجی طرحواره Zod.dev TypeScript-First.

جداول و شبکه

1. شبکه AG
   Ag-grid.com شبکه غنی از ویژگی برای React/Angular/Vue.
2. جدول واکنش
   tanstack.com/table UI بدون سر برای جداول ساختمان.
3. grid.js
   افزونه Gridjs.io سبک وزن.

انتخاب کنندگان تاریخ و زمان

1. React DatePicker
   ReactdatePicker.com انتخاب کننده تاریخ قابل تنظیم برای React.
2. لوکس
   moment.github.io/luxon دستکاری تاریخ/زمان مدرن.
3. day.js
   Day.js.org جایگزین سبک وزن برای Moment.js.

مدال ها و اعلان ها

1. sweetalert2
   sweetalert2.github.io modals زیبا و زیبا.
2. مدال
   reactcommunity.org/react-modal مؤلفه معین در دسترس.
3. UI نان تست
   اعلان ui.toast.com و مؤلفه های ویرایشگر.

چرخ فلک و کشویی

1. جارو
   Swiperjs.com کشویی لمسی مدرن.
2. واکنش نرم و صاف
   react-slick.neostack.com درگاه React از چرخ فلک نرم و صاف.

نقشه ها و جغرافیا

1. Mapbox Gl Js
   docs.mapbox.com/mapbox-gl-js نقشه های تعاملی ، قابل تنظیم.
2. جزوه
   کتابخانه نقشه برداری دوستانه موبایل.

پیمایش و منظر

1. تمام صفحه
   alvarotrigo.com/fullpage بخش های پیمایش تمام صفحه.
2. کتیبه لوکوموتیو
   LocomotiveMtl.github.io/locomotive-scroll پیمایش صاف با منظر.

خدمات و یاران

1. لوداش
   Lodash.com کتابخانه ابزار JavaScript.
2. rxjs
   برنامه نویسی واکنشی rxjs.dev با مشاهدات.
3. همیشه
   Immerjs.github.io/immer به روزرسانی های حالت تغییر ناپذیر ساخته شده آسان است.
4. وضعیت
   github.com/pmndrs/zustand مدیریت حداقل دولت برای واکنش.

آزمایش و اشکال زدایی

1. کتاب داستان
   Storybook.js.org محیط توسعه مؤلفه UI.
2. سرو
   Cypress.io آزمایش پایان به پایان برای برنامه های وب.

متفاوتی

1. tone.js
   ToneJs.Github.io چارچوب صوتی وب برای صدای تعاملی.
2. P5. برای
   p5js.org برنامه نویسی خلاق و هنر تولیدی.
3. Hammer.js
   Hammerjs.github.io تشخیص ژست برای تعامل لمسی.

📍 مرا پیدا کنید: وابسته به لینکدین | واسطه | بلوز