แนะนำ React Libraries

บันทึกเครื่องมือและรายการไลบราลี่ (Library) ต่างๆ ที่ใช้ใน ReactJS ซึ่งจะทำให้เราทำงานในการพัฒนาเว็บแอพพลิเคชั่นได้เร็วขึ้น

Form

สำหรับจัดการฟอร์มและการตรวจสอบข้อมูล

• Formik
• React Hook Form
• Yup
• Valibot

State Management

• React Redux
• Zustand

CSS Component library

• Ant Design
• MUI
• Chakra UI
• Mantine
• Tailwind CSS (Tailwind CSS Components Library)
  • Tailwind Components
  • Tailwind Toolbox
  • Next UI
  • Headless UI
  • Hyper UI
  • Daisy UI
  • Radix UI
  • Shadcn UI
    • Themes for shadcn/ui
  • Mamba UI
  • Tailwind Elements
  • Tailwind Templates
  • Flowbite
  • Sailboat UI
  • Material Tailwind
  • Tremor (Dashboards)
  • Tail Blocks
  • Meraki UI
  • Windstrap
  • Kitwind
  • Wickedtemplates
  • Kutty
  • Tailwind Kit
  • TW Elements
  • UI Aceternity
  • Ripple UI

Ref: https://github.com/hevar/awesome-react-tailwindcss-ui-components

User Interface (UI)

• React Slick, Fancyapps Carousel สำหรับแสดงแบนเนอร์หรือรูปในแบบสไลเดอร์ (carousel slider)
• Sweetalert2 สำหรับแสดงหน้าต่างลอยขึ้นมาบนหน้าเพจ (Popup box)
• Fancybox แสดงรูปภาพเป็นแบบ Lightbox คลิกแล้วขยายรูปลอยขึ้นมา
• Panzoom ขยาย zoom รูปและสามารถลากดูได้
• React Icons รวมไอคอน
• Reapop, Solid Toast, React Hot Toast, Vaul Drawer, Sonner Toast ทำ Notification Customize (Toast หรือ Drawer)
• Dndkit สำหรับช่วยทำ Drag & Drop
• Reactflow สำหรับช่วยทำ Flow graph หรือ interactive diagrams
• Cmdk ทำ Command menu
• PlateJS ทำ Rich-text editor
• skeletonreact.com ทำ Content Loader รูปแบบ animated skeleton-screen
• GridJs แสดงตารางแบบขั้นสูงปรับแต่งได้ เช่น เรียกข้อมูล ย่อขยายตาราง เป็นต้น
• Litepicker ตัวเลือกปฏิทินวันที่ (Calendar Date Picker)
• Swiperjs ทำ Slide เลื่อนซ้ายขวารองรับการ touch ปัดไปมาด้วยมือถือได้

Animation

• Framer Motion
• React Spring
• React reveal
• CountUpแสดงตัวเลขนับจำนวนในรูปแบบ Animation

Charts

• ApexCharts
• Apache ECharts

Maps

• OpenLayers, React Leaflet แสดงและจัดการแผนที่

Images

• Unlazy ทำ Lazy load รูป
• React-advanced-cropper สำหรับ Crop รูปภาพ

Date Time

สำหรับจัดการแสดงวันเวลา

• date-fns
• day.js แสดงเป็นปีพุทธศักราชได้

Rich text editor (WYSIWYG)

• Quilljs
• Editorjs
• Lexical

Utility

• Lodash สำหรับจัดการตัวแปร arrays, numbers, objects หรือ strings
• ReactToPrint จัดการการสั่งพิมพ์เฉพาะ Component
• Axios จัดการ HTTP Request สำหรับติดต่อ API ในรูปแบบ Promise-based HTTP Client
• Uppy อัพโหลดไฟล์ (File uploader)
• ESLint ช่วยแนะนำให้เขียนโค้ดตามกฎมาตรฐาน
• Prettier ช่วยจัดรูปแบบโค้ดให้ดูสวยและอ่านง่ายมากขึ้น
• Million เป็น Virtual DOM Replacement ช่วยให้ render react components เร็วขึ้น ทั้ง build time และ runtime