thai-address-autocomplete-react

🎉 RELEASE v1 🎉

Get back to active!. I hope this library will be useful for all you guy. Welcome all PR as always. Thanks.

📘 About

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.

⚙ Install

npm install thai-address-autocomplete-react
# or just `yarn add thai-address-autocomplete-react`

📌 Example Usage

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;

📋 Properties

Label description

Data label	Data field name
ตำบล/แขวง	district
อำเภอ/เขต	amphoe
จังหวัด	province
รหัสไปรษณีย์	zipcode

Component properties

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	{}

Data record (also named Address)

the data record can be found onSelect.

interface Address {
  district: string;
  amphoe: string;
  province: string;
  zipcode: number;
}

📝 Need More Example?

• Example Project: ./example
• more Document: ./docs
• Online Demo: Demo
• or Online Editor (JavaScript): StackBlitz
• or Online Editor (TypeScript): StackBlitz

🙋 FAQ?

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. ❤️

𝌡 Changelog

Please see more CHANGELOG.md

License

MIT © buildingwatsize

⚒ Thanks a lot

• Base component:
  • ant-design/auto-complete
• Amazing ideas:
  • earthchie/jquery.Thailand.js
  • Sellsuki/thai-address-database
  • zapkub/react-thailand-address-typeahead
  • winChawakorn/react-thailand-address-autocomplete
  • saintent/react-thailand-address