🌍 country-select-api

A customizable multilingual country select component for React with emoji flags.

This library provides a simple and elegant country selector with support for internationalized labels, emoji flags, and full customization via React components.

---

✨ Features

• 🌐 Multi-language country labels
• 🏳️ Emoji flags for countries
• ⚛️ React-based component
• 🎨 Supports full UI customization
• 📦 Lightweight and easy to use

---

📦 Installation

1npm install country-select-api

or with pnpm:

1pnpm add country-select-api

---

🚀 Usage

1import { useCountries } from "country-select-api";
2
3const { countryList, findByAlpha2, codeToFlag } = useCountries("en");
4
5console.log(countryList); // All countries with labels in English
6console.log(findByAlpha2("US")); // Single country by code
7console.log(codeToFlag("US")); // 🇺🇸

---

1import React from "react";
2import { CountrySelect } from "country-select-api";
3
4const App = () => {
5  return <CountrySelect language="en" callBack={(selectedCountry) => console.log(selectedCountry)} selectedCountryCode="US" />;
6};
7
8export default App;

---

---

📚 Real-world Example with MUI

1import { Autocomplete, TextField } from "@mui/material";
2import { useCountries } from "country-select-api";
3import { useLanguageStore } from "global/stores/language-store";
4
5export const CountrySelect = () => {
6  const { language } = useLanguageStore();
7  const { countryList, codeToFlag } = useCountries(language);
8
9  const handleChange = (_: any, value: any) => {
10    console.log(value);
11  };
12
13  return (
14    <Autocomplete
15      options={countryList}
16      getOptionLabel={(option) => `${codeToFlag(option.code)} ${option.label}`}
17      onChange={handleChange}
18      renderInput={(params) => <TextField {...params} label="Country" placeholder="Select the country" />}
19      sx={{ width: "100%" }}
20    />
21  );
22};

---

⚙️ Props

Prop	Type	Required	Description
language	LanguageCode (e.g., "en", "es", etc.)	✅	Language code for country labels.
selectedCountryCode	string	❌	Two-letter country code to preselect (e.g., "US").
label	string	❌	Label for the select field. Default: "Select a country".
callBack	(value: CountryDataProps) => void	❌	Callback when a country is selected.
customizedSelect	(props: { countryList, language }) => JSX.Element	❌	Render your own custom select UI. Overrides the default one.

---

🌐 Supported Languages

Supports over 40 languages including:

en, es, fr, de, it, zh, ar, ja, ko, pt, ru, tr, sv, fi, nl, pl, and more.

---

🧱 Advanced Customization

You can fully replace the default UI using the customizedSelect prop:

1<CountrySelect
2  language="fr"
3  customizedSelect={({ countryList }) => (
4    <ul>
5      {countryList.map((c) => (
6        <li key={c.code}>{c.label}</li>
7      ))}
8    </ul>
9  )}
10/>

---

📁 Folder Structure (Simplified)

src/
├── country-select.tsx       # Main component
├── data/
│   └── world.json           # Country data with translations
├── hooks/
│   └── data-country-hook.tsx
├── types/
│   ├── country-data-props.tsx
│   ├── country-select-props.tsx
│   └── language-code.tsx
├── util/
│   └── code-to-flag.tsx     # Flag emoji utility

---

🧪 Example of CountryDataProps

1{
2  id: 840,
3  code: "US",
4  code2: "USA",
5  label: "United States"
6}

---

📜 License

MIT © JhoanVanDam

---

🛠 Built with

• ⚛️ React 19
• 🧩 TypeScript
• ⚡ Vite
• 📏 ESLint