react-simple-phone-input 5.1.6 → 5.1.8

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.
Files changed (2) hide show
  1. package/README.md +297 -122
  2. package/package.json +57 -6
package/README.md CHANGED
@@ -1,139 +1,314 @@
1
- Country Data Codes
1
+ React Simple Phone Input
2
2
  ==========
3
3
 
4
- A node js package to get country data including country name, code, currency information, emoji etc.
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
- ## Introduction
7
- A simple but useful functional node packages with all country data. It includes all useful country data gives several function to complete your project.
6
+ [![npm version](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/npm-version.svg)](https://www.npmjs.com/package/react-simple-phone-input)
7
+ [![npm downloads](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/downloads.svg)](https://www.npmjs.com/package/react-simple-phone-input)
8
+ [![PRs Welcome](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/prs-welcome.svg)](https://github.com/siamahnaf198/react-simple-phone-input)
9
+ [![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/license.svg)](https://github.com/siamahnaf198/react-simple-phone-input/blob/main/LICENSE)
8
10
 
9
- ## Countries
10
-
11
- The data currently provided for each country is:
12
-
13
- * `id` The unique id number for the array
14
- * `name` The english name for the country
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
- ```bash
32
- $ npm i country-data-codes
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
- ### getFlagBase64(countryCode)
89
- Returns the country's flag image as base64 data
24
+ ## Usage
90
25
 
91
- Example
92
- ```bash
93
- import { getFlagBase64 } from "country-data-codes";
26
+ ```jsx
27
+ import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
28
+ import "react-simple-phone-input/dist/style.css";
94
29
 
95
- const flag = getFlagBase64("BD") // Give the country code(isoAlpha2 or isoAlpha3)
96
-
97
- //<img src=`data:image/png;base64, ${flag}`/>
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> &lt;Icon icon=&quot;icon-name&quot; /&gt; </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> &lt;Icon icon=&quot;icon-name&quot; /&gt; </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 to any function or see any wrong information about country, please let me know.
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
 
package/package.json CHANGED
@@ -1,11 +1,62 @@
1
1
  {
2
2
  "name": "react-simple-phone-input",
3
- "version": "5.1.6",
4
- "description": "",
5
- "main": "index.js",
3
+ "version": "5.1.8",
4
+ "description": "A simple react phone input component with calling code dropdown🤷",
5
+ "homepage": "https://react-simple-phone-input.vercel.app",
6
+ "main": "dist/cjs/index.js",
7
+ "module": "dist/esm/index.js",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "types": "dist/index.d.ts",
6
12
  "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
13
+ "build": "rollup -c"
8
14
  },
9
- "author": "",
10
- "license": "ISC"
15
+ "author": {
16
+ "name": "Siam Ahnaf",
17
+ "email": "mail@siamahnaf.com",
18
+ "url": "https://www.siamahnaf.com"
19
+ },
20
+ "license": "MIT",
21
+ "keywords": [
22
+ "react-simple-phone-input",
23
+ "react",
24
+ "phone",
25
+ "format",
26
+ "react-number-input",
27
+ "i18",
28
+ "dial code",
29
+ "calling code",
30
+ "dropdown",
31
+ "telephone",
32
+ "mobile",
33
+ "react-dom",
34
+ "international",
35
+ "phone-dropdown",
36
+ "dial code dropdown"
37
+ ],
38
+ "repository": {
39
+ "type": "git",
40
+ "directory": "https://github.com/siamahnaf/react-simple-phone-input",
41
+ "url": "https://github.com/siamahnaf/react-simple-phone-input"
42
+ },
43
+ "peerDependencies": {
44
+ "react": "^18.2.0",
45
+ "react-dom": "^18.2.0"
46
+ },
47
+ "devDependencies": {
48
+ "@rollup/plugin-commonjs": "^23.0.4",
49
+ "@rollup/plugin-node-resolve": "^15.0.1",
50
+ "@rollup/plugin-terser": "^0.1.0",
51
+ "@rollup/plugin-typescript": "^10.0.1",
52
+ "@types/react": "^18.0.26",
53
+ "@types/rollup-plugin-peer-deps-external": "^2.2.1",
54
+ "react": "^18.2.0",
55
+ "react-dom": "^18.2.0",
56
+ "rollup": "^3.7.5",
57
+ "rollup-plugin-dts": "^5.0.0",
58
+ "rollup-plugin-peer-deps-external": "^2.2.4",
59
+ "rollup-plugin-postcss": "^4.0.2",
60
+ "typescript": "^4.9.4"
61
+ }
11
62
  }