@simoko/tw-zip

特色

安裝

npm install @simoko/tw-zip

快速開始

原生 JS

import {
 getZipCode,
 getCityArray,
 searchDistricts,
 isValidZipCode,
 isValidCity,
 getZipCodeAll
} from '@simoko/tw-zip'
// 基本查詢
getCityArray() // ['台北市', '基隆市', ...]
getZipCode('中正區') // ['100', '台北市', '中正區']
getZipCode('100') // ['100', '台北市', '中正區']
// 模糊搜尋
searchDistricts('中正') // [{ city: '台北市', district: '中正區', zipCode: '100' }, ...]
// 驗證
isValidZipCode('100') // true
isValidCity('台北市') // true
// 反向查詢(同名行政區)
getZipCodeAll('中正區') // [['100', '台北市', '中正區'], ['300', '新竹市', '中正區'], ...]

React

import { useTwZip } from '@simoko/tw-zip/react'
function App() {
 const { cities, city, setCity, districts, district, setDistrict, zipCode } = useTwZip()
 return (
 <>
 <select value={city} onChange={e => setCity(e.target.value)}>
 {cities.map(c => <option key={c}>{c}</option>)}
 </select>
 <select value={district} onChange={e => setDistrict(e.target.value)}>
 {districts.map(d => <option key={d.label} value={d.label}>{d.label}</option>)}
 </select>
 <p>郵遞區號:{zipCode}</p>
 </>
 )
}

Vue

<script setup>
import { useTwZip } from '@simoko/tw-zip/vue'
const { cities, city, districts, district, zipCode } = useTwZip()
</script>
<template>
 <select v-model="city">
 <option v-for="c in cities" :key="c">{{ c }}</option>
 </select>
 <select v-model="district">
 <option v-for="d in districts" :key="d.label" :value="d.label">{{ d.label }}</option>
 </select>
 <p>郵遞區號:{{ zipCode }}</p>
</template>

Svelte

<script>
import { createTwZip } from '@simoko/tw-zip/svelte'
const { cities, city, districts, district, zipCode, setCity } = createTwZip()
</script>
<select bind:value={$city} on:change={e => setCity(e.target.value)}>
 {#each $cities as c}
 <option>{c}</option>
 {/each}
</select>
<p>郵遞區號:{$zipCode}</p>

SolidJS

import { useTwZip } from '@simoko/tw-zip/solidjs'
function App() {
 const { cities, city, setCity, districts, zipCode } = useTwZip()
 return (
 <>
 <select value={city()} onChange={e => setCity(e.target.value)}>
 {cities.map(c => <option>{c}</option>)}
 </select>
 <p>郵遞區號:{zipCode()}</p>
 </>
 )
}

Angular

import { Component } from '@angular/core'
import { TwZipService } from '@simoko/tw-zip/angular'
@Component({
 selector: 'app-zip',
 template: `
 <select [value]="twZip.city()" (change)="twZip.setCity($event.target.value)">
 <option *ngFor="let c of twZip.cities">{{ c }}</option>
 </select>
 <p>郵遞區號:{{ twZip.zipCode() }}</p>
 `
})
export class ZipComponent {
 constructor(public twZip: TwZipService) {}
}

6 碼郵遞區號

import { getZipCode6 } from '@simoko/tw-zip/zip6'
getZipCode6({ city: '臺北市', area: '中正區', road: '三元街', number: 145 })
// { zipcode: '100060', zip3: '100', city: '臺北市', area: '中正區', road: '三元街' }

打包大小

文件

授權