use-country-list-zh

一個 React Hook 函式庫，提供中文國家選擇器並支援英文輸入篩選。專為台灣應用程式設計，讓使用者能在中文下拉選單中快速找到國家。

查看範例 GitHub

核心功能

中文顯示、英文篩選

以中文顯示國家名稱，但支援英文輸入篩選。輸入「united」即可找到美國和英國。

可選國旗表情符號

根據您的介面需求，支援顯示或隱藏國旗表情符號。

常用國家置頂

將常用國家（如台灣、美國、日本）固定在列表頂部。

多種排序選項

支援依筆畫順序、英文字母順序或注音順序排序。

範例頁面

Shadcn/ui

使用 Radix UI 和 Tailwind CSS 建置的現代 React 元件

Material UI

Google Material Design 的 React 元件庫

Ant Design

企業級 UI 設計語言與 React 元件庫

快速開始

npm install use-country-list-zh

// In your component:
import { useCountryList } from 'use-country-list-zh';

function CountrySelector() {
  const {
    countries,
    query,
    setQuery,
    selectedCountry,
    setSelectedCountry,
    getDisplayText,
  } = useCountryList({
    showFlag: true,
    topList: ['TW', 'US', 'JP'],
    sortBy: 'zhuyin',
  });

  // Use countries array with your preferred UI library
  return (
    <select
      value={selectedCountry?.code || ''}
      onChange={(e) => setSelectedCountry(e.target.value)}
    >
      {countries.map((country) => (
        <option key={country.code} value={country.code}>
          {getDisplayText(country)}
        </option>
      ))}
    </select>
  );
}