Package คืออะไร
Package คือ โค้ดสำเร็จรูปที่คนอื่นเขียนไว้แล้ว ให้เราหยิบมาใช้ต่อได้เลย โดยไม่ต้องเขียนจาก scratch เช่น ถ้าอยากให้แอปสร้าง PDF ได้ ก็ไม่ต้องเขียน PDF engine เอง แค่ติดตั้ง Package ที่ทำสิ่งนั้นอยู่แล้ว โดย package จะถูกจัดการผ่าน Node Package Manager (NPM)
ข้อดีของการใช้ Package:
- ✅ ประหยัดเวลา ไม่ต้องเขียนโค้ดซ้ำ
- ✅ ผ่านการทดสอบโดย community ขนาดใหญ่
- ✅ มี documentation และตัวอย่างพร้อมให้ศึกษา
⚠️ ข้อควรระวัง: ไม่ควรติดตั้ง Package ที่ไม่รู้จักหรือไม่น่าเชื่อถือ เพราะอาจมีความเสี่ยงด้านความปลอดภัย Package ทุกตัวในหน้านี้ ผ่านการตรวจสอบแล้ว ว่าใช้งานได้กับ Vibe Coding
วิธีการใช้ Package ใน Vibe Coding
หลักการคือ บอก AI ว่าต้องการทำอะไร + ระบุ Package ที่ให้ใช้ + (ถ้าเป็นไปได้) แนบ documentation หรือ URL ของ Package
Pattern การเขียน Prompt
💡 Tip: การแนบ URL ของ documentation ไปด้วยช่วยให้ AI ดึง API และวิธีการใช้งานที่ถูกต้องมาโดยตรง โดยเฉพาะ Package ที่มีการอัปเดตบ่อย จะได้ไม่เจอปัญหา AI ใช้ syntax เวอร์ชันเก่า
สร้าง [สิ่งที่ต้องการ] โดยใช้ [ชื่อ Package]
อ้างอิง documentation จาก [URL ของ Package]กลุ่มที่ 1: Package เกี่ยวกับเอกสาร
สร้างไฟล์ PDF ด้วย React PDF
React PDF คือ Library ที่ช่วยให้คุณสร้างไฟล์ PDF ได้โดยตรงจาก React Component เหมาะสำหรับ use case เช่น ใบเสร็จ, รายงาน, หรือเอกสารใดๆ ที่ต้องการ Export เป็น PDF
| ข้อมูล | รายละเอียด |
|---|---|
| Website | react-pdf.org |
| Package Name | @react-pdf/renderer |
กลุ่มที่ 2: Package เกี่ยวกับ UI
Lucide Icon
Lucide คือ Icon Library แบบ Open Source ที่มีไอคอนให้เลือกกว่า 1,000+ ตัว ออกแบบมาในสไตล์ที่เรียบง่ายและสอดคล้องกับ Shadcn/ui โดยตรง (เพราะ Shadcn ใช้ Lucide เป็น default)
| ข้อมูล | รายละเอียด |
|---|---|
| Website | lucide.dev/icons |
| Package Name | lucide-react |
Heroicons
Heroicons คือ Icon Library จากทีม Tailwind CSS มีไอคอนสไตล์ clean และ minimal ทั้งแบบ Outline และ Solid ให้เลือกตามความเหมาะสมของ UI
| ข้อมูล | รายละเอียด |
|---|---|
| Website | heroicons.dev |
| Package Name | @heroicons/react |