@simoko/tw-zip

台灣 縣市、行政區、郵遞區號（3碼）資料

Installation

Install using npm or your favourite package manager:

npm i @simoko/tw-zip

Import:

import { getCityArray, getDistrictArray, getZipCode } from '@simoko/tw-zip'

React

stackblitz | codesandbox

import { useTwZip } from '@simoko/tw-zip/react';

export function App() {
  const { cities, districts, setCity, setDistrict, city, district, zipCode } =
    useTwZip();

  return (
    <div>
      <select onChange={(e) => setCity(e.target.value)}>
        {cities.map((c, i) => {
          return <option key={i}>{c}</option>;
        })}
      </select>

      <select onChange={(e) => setDistrict(e.target.value)}>
        {districts.map((d, i) => {
          return <option key={i}>{d['label']}</option>;
        })}
      </select>

      <div>
        {city}, {district}, {zipCode}
      </div>
    </div>
  );
}

Vue

stackblitz | codesandbox

<script setup lang="ts">
import useTwZip from '@simoko/tw-zip/vue';
const { cities, districts, city, district, zipCode } = useTwZip();
</script>

<template>
  <div>
    <select v-model="city">
      <option v-for="(c, i) in cities" :key="i">
        {{ c }}
      </option>
    </select>

    <select v-model="zipCode">
      <option v-for="(d, i) in districts" :key="i" :value="d.value">
        {{ d.label }}
      </option>
    </select>

    <div>{{ city }}, {{ district }}, {{ zipCode }}</div>
  </div>
</template>

Functions

getCityArray

▸ getCityArray(): string[]

回傳縣市陣列

Returns

string[]

Example

getCityArray()
// [ "台北市", "基隆市", "新北市", ... ]

getData

▸ getData(): ICity

回傳所有資料

Returns

ICity

Example

getData()
// { "台北市": { "中正區": "100", "大同區": "103", "中山區": "104", "松山區": "105", ... }, "基隆市": { "仁愛區": "200", "信義區": "201", "中正區": "202", ... }, ... }

getDistrictArray

▸ getDistrictArray(city?, «destructured»?): Object[]

回傳行政區資料 - array

Parameters

| Name | Type | Default value | Description | | :------ | :------ | :------ | :------ | | city | null | string | null | 縣市名稱 | | «destructured» | Object | {} | - | | › label | undefined | string | undefined | - | | › value | undefined | string | undefined | - |

Returns

Object[]

Example

getDistrictArray('台北市', { label: 'key' })
// [ { key: "中正區", value: "100" }, { key: "大同區", value: "103" }, ... ]

getDistricts

▸ getDistricts(city?): IDistrict

回傳行政區資料 - dist

Parameters

| Name | Type | Description | | :------ | :------ | :------ | | city? | string | 縣市名稱 |

Returns

IDistrict

Example

getDistricts('台北市')
// { "中正區": "100", "大同區": "103", ... }

getFlatArray

▸ getFlatArray(«destructured»?): string[]

回傳扁平化陣列資訊

Parameters

| Name | Type | | :------ | :------ | | «destructured» | Object | | › city | undefined | string | | › symbol | undefined | string |

Returns

string[]

Example

getFlatArray('台北市')
// [ "100 台北市 中正區", "103 台北市 大同區", ... ]

getFlatArray({ city: '嘉義市', symbol: '#' })
// [ "600#嘉義市#東區", "600#嘉義市#西區" ]

getZipCode

▸ getZipCode(district): undefined | string[]

根據行政區回傳郵遞區號

Parameters

| Name | Type | Description | | :------ | :------ | :------ | | district | string | 行政區名稱 |

Returns

undefined | string[]

Example

getZipCode('中正區')
// [ "100", "台北市", "中正區" ]

getZipCode('100')
// [ "100", "台北市", "中正區" ]