บทนำ

'use client'

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

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

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

ตัวอย่างด้านบนคือ ThaiAddressAutocomplete จาก template จริงที่ CLI คัดลอกให้ ไม่ใช่สำเนาที่เขียนขึ้นสำหรับเว็บเอกสาร กด "ดูโค้ด" เพื่อดูโค้ดที่ใช้

หลักการCopy Anchor Link

• เป็นเจ้าของโค้ด: คอมโพเนนต์อยู่ในโปรเจกต์ของคุณ ไม่ต้อง override style หรือห่อ wrapper เพื่อปรับแต่ง
• ข้อมูลครบในตัว: ค้นหาตำบล อำเภอ จังหวัด และรหัสไปรษณีย์ทั้งภาษาไทยและอังกฤษด้วย thaizip โดยไม่ต้องเรียก API ภายนอก
• เข้ากับ design system ที่มีอยู่: ได้แบบ vanilla (Base UI + Tailwind) หรือแบบที่ประกอบจาก primitives ของ shadcn/ui (Base UI, Radix หรือ React Aria) ตามที่ init ตรวจพบ
• พร้อมใช้กับ AI: ทุกหน้ามีฉบับ Markdown พร้อมโค้ดตัวอย่าง รวมถึง /llms.txt และ /llms-full.txt ดู ใช้ react-thaizip กับ AI

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

เริ่มอย่างรวดเร็วCopy Anchor Link

npx react-thaizip init
npx react-thaizip add autocomplete

init ตรวจ Tailwind และ shadcn/ui แล้วสร้าง thaizip.config.json ส่วน add คัดลอกคอมโพเนนต์พร้อมไฟล์ช่วยเหลือและติดตั้ง dependencies ดูรายละเอียดทีละขั้นที่ เริ่มต้นใช้งาน

ต้องการ API ค้นหาที่อยู่ระดับล่างเพื่อสร้าง UI เอง ดู thaizip Core API