Get back to active!. I hope this library will be useful for all you guy. Welcome all PR as always. Thanks.
thai-address-autocomplete-react is an input component for ReactJS that can auto-complete Thai addresses with magic by just typing something. Anyway I hope this component will be a useful thing to you. :D Happy Coding.
npm install thai-address-autocomplete-react
# or just `yarn add thai-address-autocomplete-react`import { useState } from "react";
import { Address, CreateInput } from "thai-address-autocomplete-react";
const InputThaiAddress = CreateInput();
const App = () => {
const [address, setAddress] = useState<Address>({
district: "", // ตำบล tambol
amphoe: "", // อำเภอ amphoe
province: "", // จังหวัด changwat
zipcode: "", // รหัสไปรษณีย์ postal code
});
const handleChange = (scope: string) => (value: string) => {
setAddress((oldAddr: Address) => ({
...oldAddr,
[scope]: value,
}));
};
const handleSelect = (address: Address) => {
setAddress(address);
};
return (
<div>
<label>ตำบล</label>
<InputThaiAddress.District
value={address["district"]}
onChange={handleChange("district")}
onSelect={handleSelect}
/>
<label>อำเภอ</label>
<InputThaiAddress.Amphoe
value={address["amphoe"]}
onChange={handleChange("amphoe")}
onSelect={handleSelect}
/>
<label>จังหวัด</label>
<InputThaiAddress.Province
value={address["province"]}
onChange={handleChange("province")}
onSelect={handleSelect}
/>
<label>รหัสไปรษณีย์</label>
<InputThaiAddress.Zipcode
value={address["zipcode"]}
onChange={handleChange("zipcode")}
onSelect={handleSelect}
/>
</div>
);
};
export default App;| Data label | Data field name |
|---|---|
| ตำบล/แขวง | district |
| อำเภอ/เขต | amphoe |
| จังหวัด | province |
| รหัสไปรษณีย์ | zipcode |
| Property | Description | Type | Default |
|---|---|---|---|
| scope | field name from record. Possible value will be "district", "amphoe", "province", and "zipcode". | string | "province" |
| delimiter | delimiter between scope values, which will show inside options in the autocomplete. | string | ", " |
| value | value by scope. | string | "" |
| filter | array filter function, used for fine grain result of options or fixed something on the result. | (value?: Address, index?: number, array?: Address[]) => boolean | () => true |
| onChange | function callback, trigger on input changes. | (value: string) => void | () => null |
| onSelect | function callback, trigger on select the option. | (address: Address) => void | () => null |
| style | "Fashions fade, style is eternal." — Yves Saint Laurent | CSS.Properties | {} |
| className | css class...name. | string | "" |
| autoCompleteProps | the override properties of AutoComplete: check out https://ant.design/components/auto-complete#api. |
AutoCompleteProps | {} |
the data record can be found
onSelect.
interface Address {
district: string;
amphoe: string;
province: string;
zipcode: number;
}- Example Project: ./example
- more Document: ./docs
- Online Demo: Demo
- or Online Editor (JavaScript): StackBlitz
- or Online Editor (TypeScript): StackBlitz
FAQ 1: Can I use custom database ?
Yes, but to use custom database (in this version). It supports only JSON format file that output from Database Tools by earthchie.
// 1. import json
import customDB from "./database/db.json";
// 2. used by put in the configuration before initialize component
const InputCustom = CreateInput({ database: customDB });FAQ 2: I want to ask you more.
I provide a simple document on ./docs to describe how to use this library.
But if you're not found what you want to know, please feel free to create an issue on GitHub. I would love to answer all of the questions, and I am also welcome for all the PR. ❤️
Please see more CHANGELOG.md
MIT © buildingwatsize