# บทนำ

> react-thaizip เพิ่มคอมโพเนนต์กรอกที่อยู่ไทยลงในโปรเจกต์ React และ Next.js โดยคัดลอกซอร์สโค้ดมาให้คุณเป็นเจ้าของ

Source: https://react-thai-zip.vercel.app/docs

```tsx title="autocomplete-demo.tsx"
'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](https://ui.shadcn.com/) เมื่อเพิ่มแล้ว ไฟล์เหล่านั้นเป็นโค้ดของคุณ แก้ markup, style หรือพฤติกรรมได้โดยตรง

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

## หลักการ

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

## คอมโพเนนต์

| คอมโพเนนต์ | ใช้เมื่อ |
| --- | --- |
| [Autocomplete](https://react-thai-zip.vercel.app/docs/components/autocomplete) | ให้ผู้ใช้พิมพ์ค้นหาด้วยชื่อตำบล อำเภอ จังหวัด หรือรหัสไปรษณีย์ |
| [Cascade select](https://react-thai-zip.vercel.app/docs/components/cascade-select) | ให้ผู้ใช้เลือกจังหวัด → อำเภอ/เขต → ตำบล/แขวง ตามลำดับ |
| [Address form](https://react-thai-zip.vercel.app/docs/components/address-form) | ต้องการบ้านเลขที่ หมู่ ซอย ถนน พร้อมที่อยู่ตามลำดับชั้นในฟอร์มเดียว |
| [Address display](https://react-thai-zip.vercel.app/docs/components/address-display) | แสดงที่อยู่ที่บันทึกไว้แบบอ่านอย่างเดียว |
| [Address form field](https://react-thai-zip.vercel.app/docs/components/address-form-field) | ผูก cascade select เข้ากับ react-hook-form |

## เริ่มอย่างรวดเร็ว

```npm
npx react-thaizip init
npx react-thaizip add autocomplete
```

`init` ตรวจ Tailwind และ shadcn/ui แล้วสร้าง `thaizip.config.json` ส่วน `add` คัดลอกคอมโพเนนต์พร้อมไฟล์ช่วยเหลือและติดตั้ง dependencies ดูรายละเอียดทีละขั้นที่ [เริ่มต้นใช้งาน](https://react-thai-zip.vercel.app/docs/getting-started)

ต้องการ API ค้นหาที่อยู่ระดับล่างเพื่อสร้าง UI เอง ดู [thaizip Core API](https://naay99999.github.io/thai-zip/)