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

react-thaizip เป็น CLI สำหรับ scaffold ไม่ใช่แพ็กเกจคอมโพเนนต์ runtime: มันเขียนซอร์สโค้ดคอมโพเนนต์ลงในโปรเจกต์ของคุณ และคุณเป็นเจ้าของซอร์สที่สร้างขึ้นทั้งหมด

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

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

สร้างการตั้งค่าCopy Anchor Link

npx react-thaizip init

คำสั่งนี้ตรวจสอบโครงสร้างโปรเจกต์และ Tailwind เลือก package manager แล้วสร้าง thaizip.config.json ไฟล์นี้บันทึกตำแหน่งคอมโพเนนต์, hook และ lib ที่คำสั่ง add จะใช้ ดูทุกฟิลด์และกฎการตรวจหาได้ที่ ข้อมูลอ้างอิงการตั้งค่า

ถ้าโปรเจกต์มี components.json ของ shadcn/ui แบบที่รองรับ init จะบันทึกด้วยว่า primitives ใช้ Base UI, Radix หรือ React Aria หากไม่มีจะเลือกคอมโพเนนต์แบบ vanilla Base UI

init เพิ่ม design tokens แบบ CSS custom properties ลงใน global stylesheet ด้วย สำหรับ Tailwind v3 จะพิมพ์ theme.extend snippet ที่ต้องนำไปเพิ่มในไฟล์ตั้งค่า Tailwind เอง

เพิ่ม autocompleteCopy Anchor Link

npx react-thaizip add autocomplete

โดยค่าเริ่มต้น ไฟล์ที่สร้างจะมีหน้าตาเช่นนี้ (ตำแหน่งคอมโพเนนต์อาจต่างกันตามโครงสร้างโปรเจกต์หรือการเลือกใน init):

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

คำสั่งยังติดตั้ง dependency ที่คอมโพเนนต์ต้องใช้หากยังไม่มี ดู targets, aliases และ flags เพิ่มเติมได้ที่ ข้อมูลอ้างอิง CLI

ใช้ import path ที่ add พิมพ์ให้ เพราะ path นั้นตรงกับ directory ที่เลือกตอน init ตัวอย่างในเอกสารนี้ใช้ alias @/components/... ตามแบบ shadcn/ui หากโปรเจกต์ไม่มี alias นี้หรือเก็บไฟล์ไว้ที่อื่น ให้เปลี่ยนเป็น path ที่ add พิมพ์

ใช้คอมโพเนนต์ครั้งแรกCopy Anchor Link

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

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

ต่อไป ดูคู่มือ cascade select เพื่อเลือก UI สำหรับการกรอกที่อยู่ตามลำดับ และดู การใช้งานร่วมกับฟอร์ม เพื่อส่งค่าที่อยู่ด้วยฟอร์มของเบราว์เซอร์