use-thai-address

A lightweight, easy-to-use React hook for searching and selecting Thai addresses (autocompletion). It handles data loading, searching, and filtering of Thai provinces, districts, sub-districts, and zip codes.

Features

• Easy to use: Just import the hook and you are ready to go.
• Auto-loading Data: Automatically fetches the Thai address database from an external CDN source (jquery.Thailand.js).
• Flexible Search: Search by any field or a specific field (province, district, sub-district, zip code).
• TypeScript Support: Fully typed with TypeScript.

Installation

npm install use-thai-address
# or
pnpm add use-thai-address
# or
yarn add use-thai-address

Usage

import { useState } from 'react'
import { useThaiAddress } from 'use-thai-address'

const AddressForm = () => {
  const { search, filteredData, reset } = useThaiAddress()
  const [address, setAddress] = useState({
    subDistrict: '',
    district: '',
    province: '',
    zipCode: '',
  })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    setAddress({ ...address, subDistrict: value })
    search(value) // Search across all fields
  }

  const handleSelect = (item: any) => {
    setAddress({
      subDistrict: item.subDistrict,
      district: item.district,
      province: item.province,
      zipCode: item.zipCode,
    })
    reset() // Clear search results
  }

  return (
    <div>
      <input
        type="text"
        placeholder="Search address..."
        value={address.subDistrict}
        onChange={handleChange}
      />

      {filteredData.length > 0 && (
        <ul>
          {filteredData.map((item, index) => (
            <li key={index} onClick={() => handleSelect(item)}>
              {item.subDistrict} &raquo; {item.district} &raquo; {item.province}{' '}
              &raquo; {item.zipCode}
            </li>
          ))}
        </ul>
      )}

      {/* Display selected address */}
      <div>
        <p>Sub-district: {address.subDistrict}</p>
        <p>District: {address.district}</p>
        <p>Province: {address.province}</p>
        <p>Zip Code: {address.zipCode}</p>
      </div>
    </div>
  )
}

API

useThaiAddress(options)

Options

| Name | Type | Default | Description | | ------- | -------- | ------- | ------------------------------------ | | limit | number | 10 | Maximum number of results to return. |

Returns

| Name | Type | Description | | --------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | | data | DataSourceItem[] \| null | The full loaded data source. | | filteredData | DataSourceItem[] | Array of search results based on the query. | | search | (value: string) => void | Function to search across all address fields. | | searchByField | (field: keyof DataSourceItem, value: string) => void | Function to search within a specific field (subDistrict, district, province, zipCode). | | reset | () => void | Function to reset the filtered data. |

Data Source

This library acquires Thai address data externally from the jquery.Thailand.js project via CDN. This ensures the data is kept lightweight in your bundle, but requires an internet connection to fetch the initial dataset.

The data source URL is: https://cdn.jsdelivr.net/gh/earthchie/jquery.Thailand.js/jquery.Thailand.js/database/db.json

License

MIT