Read-only address display

ThaiAddressDisplay is for pages that show an address you already have, such as an order summary or a user profile. It is purely presentational — no Base UI, and no address-index loading.

Install

npx react-thaizip add address-display

The command adds the component and utils only, to the directories recorded in thaizip.config.json — unlike the other components, this one does not pull in the address-index loading hook.

Basic usage

Import from the location generated in your project:

import { ThaiAddressDisplay, type ThaiAddressDisplayValue } from '@/components/thai-address-display'

export function OrderAddress({ address }: { address: ThaiAddressDisplayValue | null }) {
  return <ThaiAddressDisplay value={address} />
}

value takes an already-resolved address (ResolvedThaiAddress plus optional houseNo/moo/soi/street), or null when there is no address yet, which renders emptyText instead.

Full address

Multi-line layout

Use mode="multi-line" to render the house-number/moo/soi/street portion and the sub-district/district/province portion as separate rows.

<ThaiAddressDisplay value={address} mode="multi-line" />

Thai output

Use locale="th" for Thai names. "หมู่"/"ซอย" automatically become the standard transliterations "Moo"/"Soi" only under locale="en" — the house number and street name always render exactly as supplied.

No house-level fields

When value has none of houseNo/moo/soi/street, only the sub-district/district/province portion is rendered.

No address yet

Pass value={null} to render emptyText instead (the default is "No address" or "ไม่มีที่อยู่", based on locale).

Props

Value

Class slots

Ref

Related guides

See Customization to change the presentation. To let people choose or edit an address instead of only displaying it, see address form or cascade select.