Miss any of our Open RFC calls?Watch the recordings here! »

react-thailand-address-autocomplete

0.0.6 • Public • Published

react-thailand-address-autocomplete

Autocomplete Thailand address input component for React.js

Project's Github

Online demo

Insallation

yarn

yarn add react-thailand-address-autocomplete

npm

npm install --save react-thailand-address-autocomplete

Basic Usage

import InputAddress from 'react-thailand-address-autocomplete'
  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
 
  onSelect(fullAddress) {
    const { subdistrict, district, province, zipcode } = fullAddress
    this.setState({
      subdistrict,
      district,
      province,
      zipcode
    })
  }
 
  render() {
    return (
      <div>
        แขวง / ตำบล
        <InputAddress
          address="subdistrict"
          value={this.state.subdistrict}
          onChange={this.onChange}
          onSelect={this.onSelect}
        />
        เขต / อำเภอ
        <InputAddress
          address="district"
          value={this.state.district}
          onChange={this.onChange}
          onSelect={this.onSelect}
        />
      </div>
    );
  }

Props

address: String

  • Type of input address, including subdistrict, district, province, and zipcode.

  • Default value: subdistrict

value: String

  • The input content value.

onChange: Function(event)

  • The callback function that is triggered when the input content is changed.

onSelect: Function(fullAddress)

  • The callback function that is triggered when an autocomplete suggestion item is selected.
  • fullAddress is an object of full address.

filter: Function(items)

  • The callback function that is triggered before suggestion items rendered.
  • items is an array of suggestion items.
<InputAddress
  address="province"
  value={this.state.province}
  onChange={this.onChange}
  onSelect={this.onSelect}
  filter={(items) => items.filter(item => item.province !== 'กรุงเทพมหานคร')}
/>

delimiter: String

  • The delimiter in autocomplete suggestion items that separate each part of address.

  • Default value: ,

placeholder: String

  • Placeholder of the input.

highlight: String

  • Highlight color of an autocomplete suggestion item when a cursor on.

  • Default value: #eee

unhighlight: String

  • Color of an autocomplete suggestion item when no cursor on.

  • Default value: white

style: Object

  • Inline style to apply to the input.

renderStyle: Object

  • Inline style to apply to the box of autocomplete suggestion items.

Original idea

zapkub and earthchie

License

MIT

Install

npm i react-thailand-address-autocomplete

DownloadsWeekly Downloads

71

Version

0.0.6

License

MIT

Unpacked Size

3.26 MB

Total Files

9

Last publish

Collaborators

  • avatar