use-tw-zipcode

Intro 簡介

可以簡單的需要製作台灣縣市、行政區下拉式選單，並取得郵遞區號，只處理邏輯的部分，所以可以很簡單的用於各種 CSS 版型。

Taiwanese zip code, 3 digits style, is determined by two factors, city and district. It is usually not necessary to ask users to fill the zip code by themselves. It is nicer if you are building an interface capturing zip code automatically once they fill in the field, city, and district. And a dropdown menu is commonly used for this scenario.

This library aims to help you create a user-friendly dropdown menu without any CSS/style framework dependency by using React hook. You can find examples below. Let's build an excellent user interface together! 🙌🏻

Installation 安裝

npm install use-tw-zipcode

Example 範例

import React from 'react';
import { useTwZipCode, cities, districts } from 'use-tw-zipcode';

export default function App() {
  const { city, district, zipCode, handleCityChange, handleDistrictChange } = useTwZipCode();
  return (
    <div>
      <div>
        {city}
        {district}
        {zipCode}
      </div>
      <select onChange={(e) => handleCityChange(e.target.value)}>
        {cities.map((city, i) => {
          return <option key={i}>{city}</option>;
        })}
      </select>
      <select onChange={(e) => handleDistrictChange(e.target.value)}>
        {districts[city].map((district, i) => {
          return <option key={i}>{district}</option>;
        })}
      </select>
    </div>
  );
}

Other examples 其他範例

與 MATERIAL-UI 一起使用

This example shows how to work with CSS framework. In this example, it comes with MATERIAL-UI.

Live Demo