thai-address-autocomplete-react

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

Usage no npm install needed!

<script type="module">
  import thaiAddressAutocompleteReact from 'https://cdn.skypack.dev/thai-address-autocomplete-react';
</script>

README

thai-address-autocomplete-react

NPM JavaScript Style Guide NPM

📘 About

Thai-address-autocomplete-react is an input component for ReactJS, which can auto-complete thailand address with a magic by just type something. You can discover more props please see react-autocomplete, so I hope this component will be a useful thing to you :D. Happy Coding.

📋 Features

  • maxResult: Count of result on Dropdown (default: 10)
  • delimiter: Delimiter between field value (default: ", ")
  • filter: A function for filtering for more detail please go to example.
  • style: Define your beauty.
  • AntdAutoCompleteProps: for more props, please go to https://ant.design/components/auto-complete/#API

📝 Example

Please go to example directory or click to App.js

⚙ Install

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

📌 Usage

import React, { Component } from 'react'
import InputThaiAddress from 'thai-address-autocomplete-react'

class Example extends Component {
  state = {
    subdistrict: "", // tambon
    district: "", // amphoe
    province: "", // jangwat
    zipcode: "", // postal code
  }
  onChange = (targetName) => (targetValue) => {
    console.log(targetName, targetValue);
    this.setState({ [targetName]: targetValue })
  }
  onSelect = (addresses) => {
    const { subdistrict, district, province, zipcode } = addresses
    this.setState({ subdistrict, district, province, zipcode })
    // or this.setState({ ...addresses })
  }
  render() {
    const {
      subdistrict,
      district,
      province,
      zipcode,
    } = this.state
    return (
      <div>
        <label>ตำบล</label>
        <InputThaiAddress
          field={"subdistrict"}
          value={subdistrict}
          onChange={this.onChange("subdistrict")}
          onSelect={this.onSelect}
        />
        <label>อำเภอ</label>
        <InputThaiAddress
          field={"district"}
          value={district}
          onChange={this.onChange("district")}
          onSelect={this.onSelect}
        />
        <label>จังหวัด</label>
        <InputThaiAddress
          field={"province"}
          value={province}
          onChange={this.onChange("province")}
          onSelect={this.onSelect}
        />
        <label>รหัสไปรษณีย์</label>
        <InputThaiAddress
          field={"zipcode"}
          value={zipcode}
          onChange={this.onChange("zipcode")}
          onSelect={this.onSelect}
        />
      </div>
    )
  }
}

export default Example

Filtering

When you want to filtering, please use Field in raw data.

Meaning Field in component Field in raw data
ตำบล/แขวง subdistrict district
อำเภอ/เขต district amphoe
จังหวัด province province
รหัสไปรษณีย์ zipcode zipcode

License

MIT © buildingwatsize

⚒ Thanks a lot