https://github.com/imgarylai/use-tw-zipcode
這是一個用於處理台灣郵遞區號的 React Hook，提供以下功能 台灣縣市和鄉鎮市區的選擇 自動計算郵遞區號 提供完整的縣市和鄉鎮市區資料
https://github.com/imgarylai/use-tw-zipcode
hooks react reactjs taiwan typescript zipcode
Last synced: 4 months ago
JSON representation
這是一個用於處理台灣郵遞區號的 React Hook，提供以下功能 台灣縣市和鄉鎮市區的選擇 自動計算郵遞區號 提供完整的縣市和鄉鎮市區資料
- Host: GitHub
- URL: https://github.com/imgarylai/use-tw-zipcode
- Owner: imgarylai
- License: mit
- Created: 2020-05-01T15:16:10.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-07-19T04:54:15.000Z (7 months ago)
- Last Synced: 2025-07-19T09:48:05.431Z (7 months ago)
- Topics: hooks, react, reactjs, taiwan, typescript, zipcode
- Language: TypeScript
- Homepage: https://use-tw-zipcode.vercel.app/
- Size: 11.3 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-tw-zipcode
[](https://www.npmjs.com/package/use-tw-zipcode)
[](https://github.com/semantic-release/semantic-release)
## Intro 簡介
可以簡單地製作台灣縣市、行政區下拉式選單，並取得郵遞區號。本套件只處理邏輯的部分，所以可以很簡單地應用於各種 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! 🙌🏻
## Installation 安裝
```bash
npm install use-tw-zipcode
```
## Example 範例
```jsx
import React from 'react';
import { useTwZipCode, cities, districts } from 'use-tw-zipcode';
export default function App() {
const { city, district, zipCode, handleCityChange, handleDistrictChange } = useTwZipCode();
return (
{city}
{district}
{zipCode}
handleCityChange(e.target.value)}>
{cities.map((city, i) => {
return {city};
})}
handleDistrictChange(e.target.value)}>
{districts[city].map((district, i) => {
return {district};
})}
);
}
```
## Live Demo
[https://use-tw-zipcode.vercel.app/](https://use-tw-zipcode.vercel.app/)
Demo Source Code: [https://github.com/imgarylai/use-tw-zipcode-vercel](https://github.com/imgarylai/use-tw-zipcode-vercel)