Skip to content

Thai-address-autocomplete-react is an Input Component for React can auto-complete thailand address with a magic by `just type something`

Notifications You must be signed in to change notification settings

buildingwatsize/thai-address-autocomplete-react

Repository files navigation

thai-address-autocomplete-react

NPM NPM Downloads

🎉 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?

🙋 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