CLI

คำสั่ง flags, thaizip.config.json และวิธีแก้ปัญหาที่พบบ่อย

รัน CLI จากรากของโปรเจกต์ที่ต้องการ scaffold

react-thaizip init [--yes]
react-thaizip add [component...] [--yes] [--overwrite]
react-thaizip --help | --version

`init`

ตรวจโปรเจกต์แล้วพิมพ์สรุปก่อนถามคำถามใด ๆ:

Detected project settings:
  Components directory: app/components
  Lib directory: lib
  Hooks directory: hooks
  Package manager: npm
  Language: TypeScript
  Tailwind: v4 (app/globals.css)
  Component style: vanilla Tailwind (no components.json found)

แก้ directory ของคอมโพเนนต์ได้ที่ prompt จากนั้น init เพิ่ม design tokens ลง global stylesheet เสนอติดตั้ง thaizip และสร้าง thaizip.config.json ขั้นตอนที่ต้องทำเองจะพิมพ์รวมไว้ท้ายสุดใต้ === Manual steps required ===

`add`

npx react-thaizip add autocomplete cascade-select

ถ้าไม่ระบุชื่อ add จะแสดง multiselect ชื่อไม่แยกตัวพิมพ์เล็ก-ใหญ่:

คอมโพเนนต์	ชื่อที่ใช้ได้
`ThaiAddressAutocomplete`	`autocomplete`, `thai-address-autocomplete`
`ThaiAddressCascadeSelect`	`cascade`, `cascade-select`, `thai-address-cascade-select`
`ThaiAddressForm`	`address-form`, `thai-address-form`
`ThaiAddressDisplay`	`address-display`, `thai-address-display`
`ThaiAddressFormField`	`address-form-field`, `thai-address-form-field`

ใช้ชื่อคอมโพเนนต์แบบ PascalCase ได้ด้วย ไฟล์ที่ใช้ร่วมกัน (lib/utils.ts และ hooks) จะถูกเพิ่มให้อัตโนมัติ add ต้องการ thaizip 0.7.5 ขึ้นไป ติดตั้ง dependency ที่ขาด และในโปรเจกต์ shadcn/ui จะเรียก shadcn CLI เพื่อเพิ่ม primitives ที่ยังไม่มี

Flags

Flag	ผล
`--yes`, `-y`	ข้าม prompt และใช้คำตอบเริ่มต้น คำตอบเริ่มต้นของการเขียนทับคือ ไม่
`--overwrite`	เขียนทับไฟล์ที่มีอยู่โดยไม่ถาม รวมถึงไฟล์ `lib`/hook ที่ปกติได้รับการป้องกัน ใช้กับ `add` เท่านั้น
`--help`, `-h`	แสดง help วางหลัง `init` หรือ `add` เพื่อดูเฉพาะคำสั่ง ชนะ `--version`
`--version`, `-v`	แสดงเวอร์ชันของ CLI

`thaizip.config.json`

{
  "typescript": true,
  "componentDir": "app/components",
  "libDir": "lib",
  "hooksDir": "hooks",
  "packageManager": "npm",
  "tailwind": { "version": 4, "css": "app/globals.css" },
  "style": "vanilla",
  "shadcnBase": "",
  "shadcnUiAlias": "",
  "shadcnUiDir": "",
  "registryVersion": "0.3.7"
}

path ทั้งหมดเทียบจากรากโปรเจกต์ typescript: false ทำให้ add เขียนไฟล์ .jsx/.js ส่วน style เป็น vanilla หรือ shadcn โดย shadcnBase เป็น base, radix หรือ aria เมื่อใช้ shadcn ถ้าต้องการเปลี่ยน style ให้แก้ไฟล์แล้วรัน add --overwrite ใหม่ config เวอร์ชันเก่าจะถูกแปลงให้อัตโนมัติ

การแก้ปัญหา

init ตรวจไม่พบ Tailwind ติดตั้ง Tailwind ตาม framework ก่อน แล้วรัน init ใหม่

No global CSS file was found คัดลอก token block ที่พิมพ์ออกมาไปไว้ใน stylesheet ที่แอปโหลดจริง แล้วตั้ง path ใน tailwind.css

classes อย่าง bg-background ไม่มี style (Tailwind v3) เพิ่ม theme.extend snippet ที่ init พิมพ์ไว้ลงใน tailwind.config แล้ว restart dev server ดูการปรับแต่ง

thaizip ต่ำกว่า 0.7.5 รัน npm i thaizip@latest แล้วรัน add อีกครั้ง

Failed to install ติดตั้งรายการแพ็กเกจที่พิมพ์ออกมาด้วย package manager ของโปรเจกต์ แล้วรันคำสั่งเดิมอีกครั้ง

ไฟล์ถูกข้าม คอมโพเนนต์ที่มีอยู่จะไม่ถูกเขียนทับจนกว่าจะยืนยันหรือส่ง --overwrite ส่วนไฟล์ lib/hook จะถูกเก็บไว้เสมอแม้ใช้ --yes ถ้าต้องการไฟล์ใหม่ให้รัน npx react-thaizip add utils --overwrite ถ้า add เตือนว่าไฟล์เก่ากว่า registry ปัจจุบัน ให้รันคำสั่งที่มันพิมพ์ให้

import path ไม่ถูก ตรวจ directory ทั้งสามใน thaizip.config.json แล้ว cd ไปที่รากโปรเจกต์ และรัน add <component> --overwrite ใหม่

initCopy Anchor Link

addCopy Anchor Link

FlagsCopy Anchor Link

thaizip.config.jsonCopy Anchor Link

การแก้ปัญหาCopy Anchor Link

On this page

`init`

`add`

Flags

`thaizip.config.json`

การแก้ปัญหา