react-country-choices 🌍

react-country-choices est une librairie React permettant d'intégrer rapidement un sélecteur de pays avec traduction et drapeaux dans vos formulaires.

✨ Fonctionnalités

• ✅ Sélecteur de pays (MUI Autocomplete)
• 🌐 Traduction dynamique des pays (translateTo)
• 🚩 Affichage des drapeaux (flags)
• ↕️ Tri descendant (desc)
• ⚡ Callback onChangeCountry

📦 Installation

npm install react-country-choices

Dépendances requises

npm install @mui/material @emotion/react @emotion/styled

⚠️ Important : Wrapper obligatoire

Le composant utilise un Context interne.

Vous devez obligatoirement envelopper votre composant avec :

import { CountryContextProvider } from "react-country-choices";

<CountryContextProvider>
  {/* Votre code ici */}
</CountryContextProvider>

🚀 Exemple d'utilisation

import Country from "react-country-choices";
import { CountryContextProvider } from "react-country-choices";

export default function App() {
  return (
    <CountryContextProvider>
      <div style={{ width: 360, padding: 20 }}>
        <Country.Select
          translateTo="fra"
          flags
          desc={false}
          onChangeCountry={(name) => console.log("Selected:", name)}
        />
      </div>
    </CountryContextProvider>
  );
}

⚙️ Props (Country.Select)

Prop Type Description

translateTo string Code langue (fra, eng, spa, etc.) flags boolean Affiche le drapeau desc boolean Trie en ordre descendant onChangeCountry (countryName: string) => void Callback sélection label string Label du champ

🧪 Status des composants

• ✅ Country.Select : stable
• 🟡 Country.Checkbox : en amélioration
• 🔴 Country.Radio : non prêt

📘 Roadmap

• Amélioration Checkbox
• Finalisation Radio
• Optimisation fetch REST Countries
• Documentation avancée

🙌 Technologies

• REST Countries API
• Material UI (MUI)