เริ่มต้นใช้งาน

react-thaizip เป็น CLI ไม่ใช่ไลบรารีคอมโพเนนต์ที่ติดตั้งเป็น dependency มันคัดลอกซอร์สของคอมโพเนนต์ลงในโปรเจกต์ของคุณแบบเดียวกับ shadcn/ui ไฟล์ที่ได้จึงเป็นโค้ดของคุณและแก้ได้เต็มที่

สิ่งที่ต้องมีCopy Anchor Link

Node.js 18 ขึ้นไป และโปรเจกต์ React หรือ Next.js ที่ติดตั้ง Tailwind CSS v3 หรือ v4 ไว้แล้ว init ตรวจหา Tailwind แต่จะไม่ติดตั้งให้

ตั้งค่าCopy Anchor Link

npx react-thaizip init

init ตรวจโครงสร้างโปรเจกต์ package manager, TypeScript, Tailwind และ shadcn/ui เพิ่ม design tokens ลง global stylesheet ติดตั้ง thaizip แล้วสร้าง thaizip.config.json ถ้ามี components.json ของ shadcn/ui คอมโพเนนต์จะประกอบจาก primitives ของคุณเอง (Base UI, Radix หรือ React Aria) ถ้าไม่มีจะได้แบบ vanilla Base UI สำหรับ Tailwind v3 จะพิมพ์ theme.extend snippet ให้นำไปเพิ่มเอง

เพิ่มคอมโพเนนต์Copy Anchor Link

npx react-thaizip add autocomplete

components/
  thai-address-autocomplete.tsx
hooks/
  use-thai-address-index.ts
lib/
  utils.ts

add ติดตั้ง dependency ที่ขาดและพิมพ์ import path ให้ ใช้ path นั้น ตัวอย่างในเอกสารนี้ใช้ alias @/components/...

import { ThaiAddressAutocomplete } from '@/components/thai-address-autocomplete'

export function AddressField() {
  return <ThaiAddressAutocomplete onValueChange={(address) => console.log(address)} />
}

คอมโพเนนต์Copy Anchor Link