kittinun-roonsungneon / react-thailand-address-typeahead

react-thailand-address-typeahead

for v1.0 please refer to v1.0 branch

Work In Progress

Reimplementation of jquery Thailand in pure React focus on highly customizable rendering

Feature

• ✅ Customizable layout
• ✅ Fully customizable CSS
• ✅ Custom datasource option (See Storybook Custom Option)
• ✅ Keyboard navigation support
• 🚧 datasource compression
• 🚧 Lazy Loading address datasource
• 🚧 Lazy Server Side datasource support
• ️🚧 Form validation support

Demo

Example with storybook

Installation

$ npm install react react-dom react-thailand-address-typeahead

or

$ yarn add react react-dom react-thailand-address-typeahead

Usage

see storybook link here https://zapkub.github.io/react-thailand-address-v2

import React from 'react'
import {
  ThailandAddressTypeahead,
  ThailandAddressValue,
} from "react-thailand-address-typeahead";
const App = () => {
  const [val, setVal] = React.useState<ThailandAddressValue>(
    ThailandAddressValue.fromDatasourceItem({
      d: "Khongteoy",
      p: "Bangkok",
      po: "10110",
      s: "Khongteoy",
    })
  );
  return (
    <ThailandAddressTypeahead
      value={val}
      onValueChange={(val) => setVal(val)}
      datasouce={customDatasource}
    >
      <ThailandAddressTypeahead.SubdistrictInput placeholder="Tumbon" />
      <ThailandAddressTypeahead.DistrictInput placeholder="Amphoe" />

      {/** you can put any customizable layout like below */}
      <div>
        <ThailandAddressTypeahead.ProvinceInput placeholder="Province" />
        <ThailandAddressTypeahead.PostalCodeInput placeholder="Postal Code" />
      </div>

      <ThailandAddressTypeahead.Suggestion />
      { /** or custom our own suggestion with CustomSuggestion */ }
    </ThailandAddressTypeahead>
  );
};

With Create React App

// App.js
import './App.css';
import { ThailandAddressTypeahead, ThailandAddressValue } from 'react-thailand-address-typeahead'
import { useState } from 'react';

function App() {
  const [val ,setVal] = useState(ThailandAddressValue.empty())
  return (
    <div className="App">
      <ThailandAddressTypeahead value={val} onValueChange={(val) => {
        setVal({...val})
      }}>
        <ThailandAddressTypeahead.PostalCodeInput />
        <ThailandAddressTypeahead.Suggestion />
      </ThailandAddressTypeahead>
    </div>
  );
}

export default App;

Stats for nerd 🤓

• The gzip result will be around 69KB according to https://unpkg.com/[email protected]/dist/index.js
• The performance of searching is WIP

Original fork and idea

earthchie - Project Owner, Original fork (you should treat him a beer 😎🍺)

License

MIT