react-simple-phone-input 5.1.6 → 5.1.7
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 +297 -122
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,139 +1,314 @@
|
|
|
1
|
-
|
|
1
|
+
React Simple Phone Input
|
|
2
2
|
==========
|
|
3
3
|
|
|
4
|
-
A
|
|
4
|
+
A simple and customizable react phone number dropdown component. It can mix up with your designed theme and give a fluent vibe able dropdown area in your next project.
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
[](https://www.npmjs.com/package/react-simple-phone-input)
|
|
7
|
+
[](https://www.npmjs.com/package/react-simple-phone-input)
|
|
8
|
+
[](https://github.com/siamahnaf198/react-simple-phone-input)
|
|
9
|
+
[](https://github.com/siamahnaf198/react-simple-phone-input/blob/main/LICENSE)
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* `isoAlpha2` The [ISO 3166-1 alpha 2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code
|
|
16
|
-
* `isoAlpha3` The [ISO 3166-1 alpha 3](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-3) code
|
|
17
|
-
* `isoNumeric` The [ISO 3166-1 numeric](https://en.wikipedia.org/wiki/ISO_3166-1_numeric)
|
|
18
|
-
* `currency` An object with currency info.
|
|
19
|
-
|
|
20
|
-
- `code` The [ISO 4217 currency codes](http://en.wikipedia.org/wiki/ISO_4217)
|
|
21
|
-
- `name` The currency name
|
|
22
|
-
- `symbol` The currency symbol
|
|
23
|
-
|
|
24
|
-
* `flag` Country flag base64 data
|
|
25
|
-
* `languages` An array of [ISO 639-2](http://en.wikipedia.org/wiki/ISO_639-2) codes for languages.
|
|
26
|
-
* `countryCallingCodes` The international call prefixes for this country.
|
|
27
|
-
* `emoji` The emoji of country's flag.
|
|
11
|
+
- SSR Friendly
|
|
12
|
+
- Customizable
|
|
13
|
+
- Multi Design
|
|
14
|
+
- Search Country
|
|
15
|
+
- Smallest Bundle Size (About 98kb)
|
|
16
|
+
- Typescript support
|
|
28
17
|
|
|
29
18
|
## Installation
|
|
30
19
|
|
|
31
|
-
```
|
|
32
|
-
$ npm i
|
|
33
|
-
```
|
|
34
|
-
```bash
|
|
35
|
-
import { getCountryList } from "country-data-codes";
|
|
36
|
-
or
|
|
37
|
-
const { getCountryList } = require("country-data-codes")
|
|
38
|
-
```
|
|
39
|
-
Example
|
|
40
|
-
```bash
|
|
41
|
-
console.log(getCountryList()); //Returns all country list
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Methods
|
|
45
|
-
### getCurrency(countryCode)
|
|
46
|
-
Returns the country's currency info by providing country code.
|
|
47
|
-
|
|
48
|
-
Example
|
|
49
|
-
```bash
|
|
50
|
-
import { getCurrency, GetCurrencyTypes } from "country-data-codes";
|
|
51
|
-
|
|
52
|
-
const currencyInfo: GetCurrencyTypes = getCurrency("BD"); // Here country code can be isoAlpha2 or isoAlpha3
|
|
53
|
-
|
|
54
|
-
console.log(currencyInfo)
|
|
55
|
-
```
|
|
56
|
-
Return values-
|
|
57
|
-
* `name` currency name
|
|
58
|
-
* `code` currency code
|
|
59
|
-
* `symbol` currency symbol
|
|
60
|
-
|
|
61
|
-
### getCallingCode(countryCode)
|
|
62
|
-
Returns the country's calling code. It returns an array of string.
|
|
63
|
-
|
|
64
|
-
Example
|
|
65
|
-
```bash
|
|
66
|
-
import { getCallingCode, GetCallingCodeTypes } from "country-data-codes";
|
|
67
|
-
|
|
68
|
-
const dialingCode: GetCallingCodeTypes = getCallingCode("BD")
|
|
69
|
-
|
|
70
|
-
console.log(dialingCode) // Give the country code(isoAlpha2 or isoAlpha3)
|
|
71
|
-
//{
|
|
72
|
-
code: "880",
|
|
73
|
-
format: "+880",
|
|
74
|
-
flag: "" //Base64 flash data
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
### getLanguages(countryCode)
|
|
78
|
-
Returns the country's languages. It returns an array of string;
|
|
79
|
-
|
|
80
|
-
Example
|
|
81
|
-
```bash
|
|
82
|
-
import { getLanguages } from "country-data-codes";
|
|
83
|
-
|
|
84
|
-
console.log(getLanguages("BD")) // Give the country code(isoAlpha2 or isoAlpha3)
|
|
85
|
-
//["ben"]
|
|
20
|
+
```shell-script
|
|
21
|
+
$ npm i react-simple-phone-input --save
|
|
86
22
|
```
|
|
87
23
|
|
|
88
|
-
|
|
89
|
-
Returns the country's flag image as base64 data
|
|
24
|
+
## Usage
|
|
90
25
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
import
|
|
26
|
+
```jsx
|
|
27
|
+
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
|
|
28
|
+
import "react-simple-phone-input/dist/style.css";
|
|
94
29
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
### lookup(query)
|
|
101
|
-
You can search and find any country's data by any parameter, like-
|
|
102
|
-
* by `name`: You can search and find data by country name
|
|
103
|
-
* by `countryCode`: You can search and find data by country code
|
|
104
|
-
* by `callingCode`: You can search and find data by country calling code
|
|
105
|
-
* by `currencyName`: You can search and find data by country currency name
|
|
106
|
-
* by `currencyCode`: You can search and find data by country currency code
|
|
107
|
-
* by `currencySymbol`: You can search and find data by country currency symbol
|
|
108
|
-
* by `isoNumeric`: You can search and find data by country iso numeric
|
|
109
|
-
|
|
110
|
-
Example
|
|
111
|
-
```bash
|
|
112
|
-
import { lookup, CountryDataTypes } from "country-data-codes";
|
|
113
|
-
|
|
114
|
-
const data: CountryDataTypes = lookup({name: "Bangladesh"})
|
|
115
|
-
const data: CountryDataTypes = lookup({countryCode: "BD"})
|
|
116
|
-
const data: CountryDataTypes = lookup({callingCode: "+880"})
|
|
117
|
-
const data: CountryDataTypes = lookup({currencyName: "taka"})
|
|
118
|
-
const data: CountryDataTypes = lookup({currencyCode: "BDT"})
|
|
119
|
-
const data: CountryDataTypes = lookup({currencySymbol: "৳"})
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
### removeDialCode()
|
|
123
|
-
You can remove dial code from a phone number and get a string value.
|
|
124
|
-
|
|
125
|
-
Example
|
|
126
|
-
```bash
|
|
127
|
-
import { removeDialCode } from "country-data-codes";
|
|
128
|
-
|
|
129
|
-
const phone = removeDialCode("+8801611994404")
|
|
130
|
-
|
|
131
|
-
//undefined or
|
|
132
|
-
//01611994403
|
|
30
|
+
<PhoneInput
|
|
31
|
+
country="US"
|
|
32
|
+
placeholder="Add your phone"
|
|
33
|
+
onChange={(data: PhoneInputResponseType) => console.log(data)}
|
|
34
|
+
/>
|
|
133
35
|
```
|
|
36
|
+
#### [See Demo](https://react-simple-phone-input.vercel.app/)
|
|
37
|
+
|
|
38
|
+
## Options
|
|
39
|
+
<table width="100%">
|
|
40
|
+
<tr>
|
|
41
|
+
<th> Name </th>
|
|
42
|
+
<th> Type </th>
|
|
43
|
+
<th width="30%"> Description </th>
|
|
44
|
+
<th> Is Required </th>
|
|
45
|
+
<th> Example </th>
|
|
46
|
+
</tr>
|
|
47
|
+
<tr>
|
|
48
|
+
<td> country </td>
|
|
49
|
+
<td> string </td>
|
|
50
|
+
<td> initial country </td>
|
|
51
|
+
<td> required </td>
|
|
52
|
+
<td> "BD" </td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<td> placeholder </td>
|
|
56
|
+
<td> string </td>
|
|
57
|
+
<td> Input Field Placeholder Text </td>
|
|
58
|
+
<td> required </td>
|
|
59
|
+
<td> <code>Type your phone number</code> </td>
|
|
60
|
+
</tr>
|
|
61
|
+
<tr>
|
|
62
|
+
<td> value </td>
|
|
63
|
+
<td> string </td>
|
|
64
|
+
<td> Input field state value or default value </td>
|
|
65
|
+
<td> optional </td>
|
|
66
|
+
<td></td>
|
|
67
|
+
</tr>
|
|
68
|
+
|
|
69
|
+
<tr>
|
|
70
|
+
<td> iconComponent </td>
|
|
71
|
+
<td> ReactNode </td>
|
|
72
|
+
<td> Dropdown Icon component for changing default icon </td>
|
|
73
|
+
<td> optional </td>
|
|
74
|
+
<td><code> <Icon icon="icon-name" /> </code></td>
|
|
75
|
+
</tr>
|
|
76
|
+
|
|
77
|
+
<tr>
|
|
78
|
+
<td> inputProps </td>
|
|
79
|
+
<td> InputHTMLAttributes </td>
|
|
80
|
+
<td> Props to pass into the input field </td>
|
|
81
|
+
<td> optional </td>
|
|
82
|
+
<td> </td>
|
|
83
|
+
</tr>
|
|
84
|
+
|
|
85
|
+
<tr>
|
|
86
|
+
<td> onlyCountries </td>
|
|
87
|
+
<td> array </td>
|
|
88
|
+
<td> Show only country in dropdown menu with Country Codes </td>
|
|
89
|
+
<td> optional </td>
|
|
90
|
+
<td> ["BD", "US", "AF", "AL"] </td>
|
|
91
|
+
</tr>
|
|
92
|
+
|
|
93
|
+
<tr>
|
|
94
|
+
<td> excludeCountries </td>
|
|
95
|
+
<td> array </td>
|
|
96
|
+
<td> If you want to remove some country to the list. If you give <code>excludeCountries</code> then <code>onlyCountries</code> not works </td>
|
|
97
|
+
<td> optional </td>
|
|
98
|
+
<td> ["AF", "AL"] </td>
|
|
99
|
+
</tr>
|
|
100
|
+
|
|
101
|
+
<tr>
|
|
102
|
+
<td> preferredCountries </td>
|
|
103
|
+
<td> array </td>
|
|
104
|
+
<td> Country codes to show on the top of the dropdown menu </td>
|
|
105
|
+
<td> optional </td>
|
|
106
|
+
<td> ["BD", "US"] </td>
|
|
107
|
+
</tr>
|
|
108
|
+
|
|
109
|
+
<tr>
|
|
110
|
+
<td> searchPlaceholder </td>
|
|
111
|
+
<td> string </td>
|
|
112
|
+
<td> Search input field placeholder </td>
|
|
113
|
+
<td>optional</td>
|
|
114
|
+
<td></td>
|
|
115
|
+
</tr>
|
|
116
|
+
|
|
117
|
+
<tr>
|
|
118
|
+
<td> searchIconComponent </td>
|
|
119
|
+
<td> ReactNode </td>
|
|
120
|
+
<td> If <code>search</code> enabled, custom search icon to show on search bar </td>
|
|
121
|
+
<td> optional </td>
|
|
122
|
+
<td><code> <Icon icon="icon-name" /> </code></td>
|
|
123
|
+
</tr>
|
|
124
|
+
|
|
125
|
+
<tr>
|
|
126
|
+
<td> searchProps </td>
|
|
127
|
+
<td> InputHTMLAttributes </td>
|
|
128
|
+
<td> Props to pass into the search input field </td>
|
|
129
|
+
<td> optional </td>
|
|
130
|
+
<td> </td>
|
|
131
|
+
</tr>
|
|
132
|
+
|
|
133
|
+
<tr>
|
|
134
|
+
<td> searchNotFound </td>
|
|
135
|
+
<td> string </td>
|
|
136
|
+
<td> Error message when search result is empty! </td>
|
|
137
|
+
<td> optional </td>
|
|
138
|
+
<td> </td>
|
|
139
|
+
</tr>
|
|
140
|
+
</table>
|
|
141
|
+
|
|
142
|
+
## Other Options
|
|
143
|
+
|
|
144
|
+
<table>
|
|
145
|
+
<tr>
|
|
146
|
+
<th> Name </th>
|
|
147
|
+
<th> Default </th>
|
|
148
|
+
<th> Description </th>
|
|
149
|
+
</tr>
|
|
150
|
+
<tr>
|
|
151
|
+
<td> showDropdownIcon </td>
|
|
152
|
+
<td> true </td>
|
|
153
|
+
<td> Show or Hide dropdown icon </td>
|
|
154
|
+
</tr>
|
|
155
|
+
<tr>
|
|
156
|
+
<td> dialCodeInputField </td>
|
|
157
|
+
<td> false </td>
|
|
158
|
+
<td> Show calling code into into field or show beside country flag. For more, see <a href="https://react-simple-phone-input.vercel.app/">example</a> </td>
|
|
159
|
+
</tr>
|
|
160
|
+
<tr>
|
|
161
|
+
<td> search </td>
|
|
162
|
+
<td> true </td>
|
|
163
|
+
<td> Show or Hide search input field </td>
|
|
164
|
+
</tr>
|
|
165
|
+
<tr>
|
|
166
|
+
<td> showSearchIcon </td>
|
|
167
|
+
<td> true </td>
|
|
168
|
+
<td> Show or Hide search icon </td>
|
|
169
|
+
</tr>
|
|
170
|
+
<tr>
|
|
171
|
+
<td> disableDropdownOnly </td>
|
|
172
|
+
<td> false </td>
|
|
173
|
+
<td> Disable dropdown menu list </td>
|
|
174
|
+
</tr>
|
|
175
|
+
<tr>
|
|
176
|
+
<td> disableInput </td>
|
|
177
|
+
<td> false </td>
|
|
178
|
+
<td> Disable input field </td>
|
|
179
|
+
</tr>
|
|
180
|
+
</table>
|
|
181
|
+
|
|
182
|
+
## Event
|
|
183
|
+
|
|
184
|
+
<table>
|
|
185
|
+
<tr>
|
|
186
|
+
<th> Event Name </th>
|
|
187
|
+
<th> Description </th>
|
|
188
|
+
<th> Example </th>
|
|
189
|
+
</tr>
|
|
190
|
+
<tr>
|
|
191
|
+
<td> onChange </td>
|
|
192
|
+
<td> To get the value from component. You get following field
|
|
193
|
+
<ul>
|
|
194
|
+
<li><code>country</code></li>
|
|
195
|
+
<li><code>code</code></li>
|
|
196
|
+
<li><code>dialCode</code></li>
|
|
197
|
+
<li><code>value</code></li>
|
|
198
|
+
<li><code>valueWithoutPlus</code></li>
|
|
199
|
+
</ul>
|
|
200
|
+
</td>
|
|
201
|
+
<td> <code>onChange={(data: PhoneInputResponseType) => console.log(data)}</code> </td>
|
|
202
|
+
</tr>
|
|
203
|
+
</table>
|
|
204
|
+
|
|
205
|
+
## ClassName
|
|
206
|
+
|
|
207
|
+
<table>
|
|
208
|
+
<tr>
|
|
209
|
+
<th> Name </th>
|
|
210
|
+
<th> Type </th>
|
|
211
|
+
<th> Description </th>
|
|
212
|
+
</tr>
|
|
213
|
+
<tr>
|
|
214
|
+
<td> containerClass </td>
|
|
215
|
+
<td> string </td>
|
|
216
|
+
<td> class name for container </td>
|
|
217
|
+
</tr>
|
|
218
|
+
<tr>
|
|
219
|
+
<td> buttonClass </td>
|
|
220
|
+
<td> string </td>
|
|
221
|
+
<td> class name for dropdown button </td>
|
|
222
|
+
</tr>
|
|
223
|
+
<tr>
|
|
224
|
+
<td> dropdownClass </td>
|
|
225
|
+
<td> string </td>
|
|
226
|
+
<td> class name for dropdown area/menu </td>
|
|
227
|
+
</tr>
|
|
228
|
+
<tr>
|
|
229
|
+
<td> dropdownListClass </td>
|
|
230
|
+
<td> string </td>
|
|
231
|
+
<td> class name for dropdown list </td>
|
|
232
|
+
</tr>
|
|
233
|
+
<tr>
|
|
234
|
+
<td> dropdownIconClass </td>
|
|
235
|
+
<td> string </td>
|
|
236
|
+
<td> class name for dropdown icon </td>
|
|
237
|
+
</tr><tr>
|
|
238
|
+
<td> searchContainerClass </td>
|
|
239
|
+
<td> string </td>
|
|
240
|
+
<td> class name for search bar container </td>
|
|
241
|
+
</tr>
|
|
242
|
+
<tr>
|
|
243
|
+
<td> searchInputClass </td>
|
|
244
|
+
<td> string </td>
|
|
245
|
+
<td> class name for search input field </td>
|
|
246
|
+
</tr>
|
|
247
|
+
<tr>
|
|
248
|
+
<td> searchIconClass </td>
|
|
249
|
+
<td> string </td>
|
|
250
|
+
<td> class name for search icon </td>
|
|
251
|
+
</tr>
|
|
252
|
+
<tr>
|
|
253
|
+
<td> inputClass </td>
|
|
254
|
+
<td> string </td>
|
|
255
|
+
<td> class name for search icon </td>
|
|
256
|
+
</tr>
|
|
257
|
+
</table>
|
|
258
|
+
|
|
259
|
+
## Customize styles
|
|
260
|
+
|
|
261
|
+
<table>
|
|
262
|
+
<tr>
|
|
263
|
+
<th> Name </th>
|
|
264
|
+
<th> Description </th>
|
|
265
|
+
</tr>
|
|
266
|
+
<tr>
|
|
267
|
+
<td> containerStyle </td>
|
|
268
|
+
<td> phone Input Container style </td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
271
|
+
<td> buttonStyle </td>
|
|
272
|
+
<td> style for dropdown button </td>
|
|
273
|
+
</tr>
|
|
274
|
+
<tr>
|
|
275
|
+
<td> dropdownStyle </td>
|
|
276
|
+
<td> style for dropdown menu/area </td>
|
|
277
|
+
</tr>
|
|
278
|
+
<tr>
|
|
279
|
+
<td> dropdownListStyle </td>
|
|
280
|
+
<td> style for dropdown list </td>
|
|
281
|
+
</tr>
|
|
282
|
+
<tr>
|
|
283
|
+
<td> dropdownIconStyle </td>
|
|
284
|
+
<td> style for dropdown icon </td>
|
|
285
|
+
</tr>
|
|
286
|
+
<tr>
|
|
287
|
+
<td> searchContainerStyle </td>
|
|
288
|
+
<td> search container style </td>
|
|
289
|
+
</tr>
|
|
290
|
+
<tr>
|
|
291
|
+
<td> searchInputStyle </td>
|
|
292
|
+
<td> search input field style </td>
|
|
293
|
+
</tr>
|
|
294
|
+
<tr>
|
|
295
|
+
<td> searchIconStyle </td>
|
|
296
|
+
<td> search icon style </td>
|
|
297
|
+
</tr>
|
|
298
|
+
<tr>
|
|
299
|
+
<td> inputStyle </td>
|
|
300
|
+
<td> input field style </td>
|
|
301
|
+
</tr>
|
|
302
|
+
</table>
|
|
303
|
+
|
|
304
|
+
`note:` version 5 released. see the [changelogs](https://github.com/siamahnaf198/react-simple-phone-input/releases/tag/v5.0.0)
|
|
305
|
+
|
|
306
|
+
## Contributing
|
|
307
|
+
- Code style changes not allowed
|
|
308
|
+
- Do not create issues about incorrect or missing country data
|
|
134
309
|
|
|
135
310
|
## Issues or correction
|
|
136
|
-
If you face any issues
|
|
311
|
+
If you face any issues, missing data or wrong data about country, you are welcome to create an issue.
|
|
137
312
|
|
|
138
313
|
## Stay in touch
|
|
139
314
|
|