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

Taiwanese zip code (3 digits) is determined by two factors: city and district. It is usually not necessary to ask users to fill in the zip code manually. It's more user-friendly if you can automatically capture the zip code once they select their city and district. A dropdown menu is commonly used for this scenario.

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

npm install use-tw-zipcode

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> ); }

https://use-tw-zipcode.vercel.app/

Demo Source Code: https://github.com/imgarylai/use-tw-zipcode-vercel