README
thai-address-autocomplete-react
ð 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
- Online Demo: Demo
â 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