@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", "台北市", "中正區" ]