react-country-choices 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +105 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# react-country-choices 🌍
|
|
2
|
+
|
|
3
|
+
`react-country-choices` est une librairie React permettant d'intégrer
|
|
4
|
+
rapidement un sélecteur de pays avec traduction et drapeaux dans vos
|
|
5
|
+
formulaires.
|
|
6
|
+
|
|
7
|
+
------------------------------------------------------------------------
|
|
8
|
+
|
|
9
|
+
## ✨ Fonctionnalités
|
|
10
|
+
|
|
11
|
+
- ✅ Sélecteur de pays (MUI Autocomplete)
|
|
12
|
+
- 🌐 Traduction dynamique des pays (`translateTo`)
|
|
13
|
+
- 🚩 Affichage des drapeaux (`flags`)
|
|
14
|
+
- ↕️ Tri descendant (`desc`)
|
|
15
|
+
- ⚡ Callback `onChangeCountry`
|
|
16
|
+
|
|
17
|
+
------------------------------------------------------------------------
|
|
18
|
+
|
|
19
|
+
## 📦 Installation
|
|
20
|
+
|
|
21
|
+
``` bash
|
|
22
|
+
npm install react-country-choices
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Dépendances requises
|
|
26
|
+
|
|
27
|
+
``` bash
|
|
28
|
+
npm install @mui/material @emotion/react @emotion/styled
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
------------------------------------------------------------------------
|
|
32
|
+
|
|
33
|
+
## ⚠️ Important : Wrapper obligatoire
|
|
34
|
+
|
|
35
|
+
Le composant utilise un Context interne.
|
|
36
|
+
|
|
37
|
+
Vous devez obligatoirement envelopper votre composant avec :
|
|
38
|
+
|
|
39
|
+
``` tsx
|
|
40
|
+
import { CountryContextProvider } from "react-country-choices";
|
|
41
|
+
|
|
42
|
+
<CountryContextProvider>
|
|
43
|
+
{/* Votre code ici */}
|
|
44
|
+
</CountryContextProvider>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
------------------------------------------------------------------------
|
|
48
|
+
|
|
49
|
+
## 🚀 Exemple d'utilisation
|
|
50
|
+
|
|
51
|
+
``` tsx
|
|
52
|
+
import Country from "react-country-choices";
|
|
53
|
+
import { CountryContextProvider } from "react-country-choices";
|
|
54
|
+
|
|
55
|
+
export default function App() {
|
|
56
|
+
return (
|
|
57
|
+
<CountryContextProvider>
|
|
58
|
+
<div style={{ width: 360, padding: 20 }}>
|
|
59
|
+
<Country.Select
|
|
60
|
+
translateTo="fra"
|
|
61
|
+
flags
|
|
62
|
+
desc={false}
|
|
63
|
+
onChangeCountry={(name) => console.log("Selected:", name)}
|
|
64
|
+
/>
|
|
65
|
+
</div>
|
|
66
|
+
</CountryContextProvider>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
------------------------------------------------------------------------
|
|
72
|
+
|
|
73
|
+
## ⚙️ Props (Country.Select)
|
|
74
|
+
|
|
75
|
+
Prop Type Description
|
|
76
|
+
----------------- -------------------------------- -----------------------------------------
|
|
77
|
+
translateTo string Code langue (`fra`, `eng`, `spa`, etc.)
|
|
78
|
+
flags boolean Affiche le drapeau
|
|
79
|
+
desc boolean Trie en ordre descendant
|
|
80
|
+
onChangeCountry (countryName: string) =\> void Callback sélection
|
|
81
|
+
label string Label du champ
|
|
82
|
+
|
|
83
|
+
------------------------------------------------------------------------
|
|
84
|
+
|
|
85
|
+
## 🧪 Status des composants
|
|
86
|
+
|
|
87
|
+
- ✅ Country.Select : stable
|
|
88
|
+
- 🟡 Country.Checkbox : en amélioration
|
|
89
|
+
- 🔴 Country.Radio : non prêt
|
|
90
|
+
|
|
91
|
+
------------------------------------------------------------------------
|
|
92
|
+
|
|
93
|
+
## 📘 Roadmap
|
|
94
|
+
|
|
95
|
+
- Amélioration Checkbox
|
|
96
|
+
- Finalisation Radio
|
|
97
|
+
- Optimisation fetch REST Countries
|
|
98
|
+
- Documentation avancée
|
|
99
|
+
|
|
100
|
+
------------------------------------------------------------------------
|
|
101
|
+
|
|
102
|
+
## 🙌 Technologies
|
|
103
|
+
|
|
104
|
+
- REST Countries API
|
|
105
|
+
- Material UI (MUI)
|