可以簡單地製作台灣縣市、行政區下拉式選單，並取得郵遞區號。本套件只處理邏輯的部分，所以可以很簡單地應用於各種 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-zipcodeimport 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