react-thaizip

แสดงที่อยู่แบบอ่านอย่างเดียว

จัดรูปแบบที่อยู่ไทยที่เลือกไว้แล้วให้เป็นข้อความอ่านง่าย ไม่ต้องโหลดดัชนีที่อยู่

ThaiAddressDisplay เหมาะกับหน้าที่ต้องแสดงที่อยู่ที่บันทึกไว้แล้ว เช่นหน้าสรุปคำสั่งซื้อหรือโปรไฟล์ผู้ใช้ เป็นคอมโพเนนต์อ่านอย่างเดียว ไม่มี Base UI และไม่โหลดดัชนีที่อยู่ จึงมี style เดียว

99/9 หมู่ 4 ซอย2 สุขุมวิท, คลองตันเหนือ > วัฒนา > กรุงเทพมหานคร 10110
import { ThaiAddressDisplay, type ThaiAddressDisplayValue } from '@/components/thai-address-display'

const address: ThaiAddressDisplayValue = {
  tambon: 'คลองตันเหนือ',
  tambonEn: 'Khlong Tan Nuea',
  amphure: 'วัฒนา',
  amphureEn: 'Watthana',
  province: 'กรุงเทพมหานคร',
  provinceEn: 'Bangkok',
  zipCode: '10110',
  subdistrict: 'คลองตันเหนือ',
  subdistrictEn: 'Khlong Tan Nuea',
  district: 'วัฒนา',
  districtEn: 'Watthana',
  postalCode: '10110',
  houseNo: '99/9',
  moo: '4',
  soi: '2',
  street: 'สุขุมวิท',
}

export default function AddressDisplayDemo() {
  return <ThaiAddressDisplay value={address} />
}

ติดตั้ง

npx react-thaizip add address-display

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

วิธีใช้

import { ThaiAddressDisplay } from '@/components/thai-address-display'
<ThaiAddressDisplay value={address} />

value รับที่อยู่ที่ resolve ไว้แล้ว (ResolvedThaiAddress บวก houseNo/moo/soi/street แบบ optional มี type ชื่อ ThaiAddressDisplayValue) หรือ null เมื่อยังไม่มีที่อยู่ ซึ่งจะแสดง emptyText แทน

ตัวอย่าง

หลายบรรทัด

ใช้ mode="multi-line" เพื่อแยกส่วนบ้านเลขที่/หมู่/ซอย/ถนน กับส่วนตำบล-อำเภอ-จังหวัดออกเป็นคนละบรรทัด

99/9 หมู่ 4 ซอย2 สุขุมวิทคลองตันเหนือ > วัฒนา > กรุงเทพมหานคร 10110
import { ThaiAddressDisplay, type ThaiAddressDisplayValue } from '@/components/thai-address-display'

const address: ThaiAddressDisplayValue = {
  tambon: 'คลองตันเหนือ',
  tambonEn: 'Khlong Tan Nuea',
  amphure: 'วัฒนา',
  amphureEn: 'Watthana',
  province: 'กรุงเทพมหานคร',
  provinceEn: 'Bangkok',
  zipCode: '10110',
  subdistrict: 'คลองตันเหนือ',
  subdistrictEn: 'Khlong Tan Nuea',
  district: 'วัฒนา',
  districtEn: 'Watthana',
  postalCode: '10110',
  houseNo: '99/9',
  moo: '4',
  soi: '2',
  street: 'สุขุมวิท',
}

export default function AddressDisplayMultiLine() {
  return <ThaiAddressDisplay value={address} mode="multi-line" />
}

แสดงเป็นภาษาอังกฤษ

ใช้ locale="en" เพื่อแสดงชื่อภาษาอังกฤษ คำว่า "หมู่"/"ซอย" จะเปลี่ยนเป็นคำทับศัพท์มาตรฐาน "Moo"/"Soi" โดยอัตโนมัติ ส่วนบ้านเลขที่และชื่อถนนแสดงตามที่กรอกไว้เสมอ

99/9 Moo 4 Soi 2 สุขุมวิท, Khlong Tan Nuea > Watthana > Bangkok 10110
import { ThaiAddressDisplay, type ThaiAddressDisplayValue } from '@/components/thai-address-display'

const address: ThaiAddressDisplayValue = {
  tambon: 'คลองตันเหนือ',
  tambonEn: 'Khlong Tan Nuea',
  amphure: 'วัฒนา',
  amphureEn: 'Watthana',
  province: 'กรุงเทพมหานคร',
  provinceEn: 'Bangkok',
  zipCode: '10110',
  subdistrict: 'คลองตันเหนือ',
  subdistrictEn: 'Khlong Tan Nuea',
  district: 'วัฒนา',
  districtEn: 'Watthana',
  postalCode: '10110',
  houseNo: '99/9',
  moo: '4',
  soi: '2',
  street: 'สุขุมวิท',
}

export default function AddressDisplayEn() {
  return <ThaiAddressDisplay value={address} locale="en" />
}

ไม่มีบ้านเลขที่

เมื่อ value ไม่มี houseNo/moo/soi/street เลย จะแสดงเฉพาะตำบล-อำเภอ-จังหวัด

คลองตันเหนือ > วัฒนา > กรุงเทพมหานคร 10110
import { ThaiAddressDisplay, type ThaiAddressDisplayValue } from '@/components/thai-address-display'

const address: ThaiAddressDisplayValue = {
  tambon: 'คลองตันเหนือ',
  tambonEn: 'Khlong Tan Nuea',
  amphure: 'วัฒนา',
  amphureEn: 'Watthana',
  province: 'กรุงเทพมหานคร',
  provinceEn: 'Bangkok',
  zipCode: '10110',
  subdistrict: 'คลองตันเหนือ',
  subdistrictEn: 'Khlong Tan Nuea',
  district: 'วัฒนา',
  districtEn: 'Watthana',
  postalCode: '10110',
}

export default function AddressDisplayMinimal() {
  return <ThaiAddressDisplay value={address} />
}

ยังไม่มีที่อยู่

ส่ง value={null} เพื่อแสดง emptyText แทน (ค่าเริ่มต้นคือ "ไม่มีที่อยู่" หรือ "No address" ตาม locale)

ไม่มีที่อยู่
import { ThaiAddressDisplay } from '@/components/thai-address-display'

export default function AddressDisplayEmpty() {
  return <ThaiAddressDisplay value={null} />
}

ปรับสไตล์

ใช้ className กับ <address> และ lineClassName กับแต่ละบรรทัดในโหมดหลายบรรทัด ตัวอย่างนี้ทำเป็นการ์ดและเน้นบรรทัดแรก

99/9 หมู่ 4 ซอย2 สุขุมวิทคลองตันเหนือ > วัฒนา > กรุงเทพมหานคร 10110
import { ThaiAddressDisplay, type ThaiAddressDisplayValue } from '@/components/thai-address-display'

const address: ThaiAddressDisplayValue = {
  tambon: 'คลองตันเหนือ',
  tambonEn: 'Khlong Tan Nuea',
  amphure: 'วัฒนา',
  amphureEn: 'Watthana',
  province: 'กรุงเทพมหานคร',
  provinceEn: 'Bangkok',
  zipCode: '10110',
  subdistrict: 'คลองตันเหนือ',
  subdistrictEn: 'Khlong Tan Nuea',
  district: 'วัฒนา',
  districtEn: 'Watthana',
  postalCode: '10110',
  houseNo: '99/9',
  moo: '4',
  soi: '2',
  street: 'สุขุมวิท',
}

export default function AddressDisplayStyled() {
  return (
    <ThaiAddressDisplay
      value={address}
      mode="multi-line"
      className="rounded-lg border p-4 not-italic"
      lineClassName="first:font-medium"
    />
  )
}

API Reference

PropTypeค่าเริ่มต้นรายละเอียด
valueThaiAddressDisplayValue | null—จำเป็น ที่อยู่ที่จะแสดง; null จะแสดง emptyText แทน
locale'th' | 'en''th'กำหนดภาษาของชื่อพื้นที่และ emptyText เริ่มต้น
mode'single-line' | 'multi-line''single-line''single-line' ต่อส่วนถนนกับพื้นที่ด้วย ', ' ส่วน 'multi-line' แสดงเป็นสองบรรทัด
emptyTextstring'ไม่มีที่อยู่' / 'No address'ข้อความเมื่อ value เป็น null ตาม locale
classNamestring—<address> หลัก
lineClassNamestring—แต่ละบรรทัดในโหมด 'multi-line'
refReact.Ref<HTMLElement>—ส่งต่อไปยัง <address>

ดูเพิ่มเติม

ดู การปรับแต่ง สำหรับปรับหน้าตา ถ้าต้องการให้ผู้ใช้เลือกหรือแก้ไขที่อยู่ ดู ฟอร์มที่อยู่แบบเต็ม หรือ cascade select

On this page

ติดตั้งวิธีใช้ตัวอย่างหลายบรรทัดแสดงเป็นภาษาอังกฤษไม่มีบ้านเลขที่ยังไม่มีที่อยู่ปรับสไตล์API Referenceดูเพิ่มเติม