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

``bash
npm install use-thai-address


or

`tsx
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) => {
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 (


| 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