react-simple-phone-input 4.6.8 → 5.0.0
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 +129 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
React Simple Phone Input
|
|
2
2
|
==========
|
|
3
3
|
|
|
4
|
-
A simple and customizable react phone number dropdown component. It can
|
|
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
6
|
[](https://www.npmjs.com/package/react-simple-phone-input)
|
|
7
7
|
[](https://www.npmjs.com/package/react-simple-phone-input)
|
|
8
8
|
[](https://github.com/siamahnaf198/react-simple-phone-input)
|
|
9
9
|
[](https://github.com/siamahnaf198/react-simple-phone-input/blob/main/LICENSE)
|
|
10
10
|
|
|
11
|
-
- SSR
|
|
11
|
+
- SSR Friendly
|
|
12
12
|
- Customizable
|
|
13
13
|
- Multi Design
|
|
14
|
-
- Search
|
|
14
|
+
- Search Country
|
|
15
|
+
- Smallest Bundle Size
|
|
15
16
|
|
|
16
17
|
## Installation
|
|
17
18
|
|
|
@@ -22,13 +23,13 @@ $ npm i react-simple-phone-input --save
|
|
|
22
23
|
## Installation
|
|
23
24
|
|
|
24
25
|
```jsx
|
|
25
|
-
import { PhoneInput } from "react-simple-phone-input";
|
|
26
|
+
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
|
|
26
27
|
import "react-simple-phone-input/dist/style.css";
|
|
27
28
|
|
|
28
29
|
<PhoneInput
|
|
29
30
|
country="US"
|
|
30
31
|
placeholder="Add your phone"
|
|
31
|
-
onChange={(data) => console.log(data)}
|
|
32
|
+
onChange={(data: PhoneInputResponseType) => console.log(data)}
|
|
32
33
|
/>
|
|
33
34
|
```
|
|
34
35
|
#### [See Demo](https://react-simple-phone-input.vercel.app/)
|
|
@@ -69,7 +70,7 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
69
70
|
<td> ReactNode </td>
|
|
70
71
|
<td> Dropdown Icon component for changing default icon </td>
|
|
71
72
|
<td> optional </td>
|
|
72
|
-
<td><code> <Icon icon="icon-name" /> </
|
|
73
|
+
<td><code> <Icon icon="icon-name" /> </code></td>
|
|
73
74
|
</tr>
|
|
74
75
|
|
|
75
76
|
<tr>
|
|
@@ -117,7 +118,7 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
117
118
|
<td> ReactNode </td>
|
|
118
119
|
<td> If <code>search</code> enabled, custom search icon to show on search bar </td>
|
|
119
120
|
<td> optional </td>
|
|
120
|
-
<td><code> <Icon icon="icon-name" /> </
|
|
121
|
+
<td><code> <Icon icon="icon-name" /> </code></td>
|
|
121
122
|
</tr>
|
|
122
123
|
|
|
123
124
|
<tr>
|
|
@@ -165,6 +166,16 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
165
166
|
<td> true </td>
|
|
166
167
|
<td> Show or Hide search icon </td>
|
|
167
168
|
</tr>
|
|
169
|
+
<tr>
|
|
170
|
+
<td> disableDropdownOnly </td>
|
|
171
|
+
<td> false </td>
|
|
172
|
+
<td> Disable dropdown menu list </td>
|
|
173
|
+
</tr>
|
|
174
|
+
<tr>
|
|
175
|
+
<td> disableInput </td>
|
|
176
|
+
<td> false </td>
|
|
177
|
+
<td> Disable input field </td>
|
|
178
|
+
</tr>
|
|
168
179
|
</table>
|
|
169
180
|
|
|
170
181
|
## Event
|
|
@@ -177,11 +188,120 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
177
188
|
</tr>
|
|
178
189
|
<tr>
|
|
179
190
|
<td> onChange </td>
|
|
180
|
-
<td> To get the value from component
|
|
181
|
-
|
|
191
|
+
<td> To get the value from component. You get following field
|
|
192
|
+
<ul>
|
|
193
|
+
<li><code>country</code></li>
|
|
194
|
+
<li><code>code</code></li>
|
|
195
|
+
<li><code>dialCode</code></li>
|
|
196
|
+
<li><code>value</code></li>
|
|
197
|
+
<li><code>valueWithoutPlus</code></li>
|
|
198
|
+
</ul>
|
|
199
|
+
</td>
|
|
200
|
+
<td> <code>onChange={(data: PhoneInputResponseType) => console.log(data)}</code> </td>
|
|
182
201
|
</tr>
|
|
183
202
|
</table>
|
|
184
203
|
|
|
204
|
+
## ClassName
|
|
205
|
+
|
|
206
|
+
<table>
|
|
207
|
+
<tr>
|
|
208
|
+
<th> Name </th>
|
|
209
|
+
<th> Type </th>
|
|
210
|
+
<th> Description </th>
|
|
211
|
+
</tr>
|
|
212
|
+
<tr>
|
|
213
|
+
<td> containerClass </td>
|
|
214
|
+
<td> string </td>
|
|
215
|
+
<td> class name for container </td>
|
|
216
|
+
</tr>
|
|
217
|
+
<tr>
|
|
218
|
+
<td> buttonClass </td>
|
|
219
|
+
<td> string </td>
|
|
220
|
+
<td> class name for dropdown button </td>
|
|
221
|
+
</tr>
|
|
222
|
+
<tr>
|
|
223
|
+
<td> dropdownClass </td>
|
|
224
|
+
<td> string </td>
|
|
225
|
+
<td> class name for dropdown area/menu </td>
|
|
226
|
+
</tr>
|
|
227
|
+
<tr>
|
|
228
|
+
<td> dropdownListClass </td>
|
|
229
|
+
<td> string </td>
|
|
230
|
+
<td> class name for dropdown list </td>
|
|
231
|
+
</tr>
|
|
232
|
+
<tr>
|
|
233
|
+
<td> dropdownIconClass </td>
|
|
234
|
+
<td> string </td>
|
|
235
|
+
<td> class name for dropdown icon </td>
|
|
236
|
+
</tr><tr>
|
|
237
|
+
<td> searchContainerClass </td>
|
|
238
|
+
<td> string </td>
|
|
239
|
+
<td> class name for search bar container </td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr>
|
|
242
|
+
<td> searchInputClass </td>
|
|
243
|
+
<td> string </td>
|
|
244
|
+
<td> class name for search input field </td>
|
|
245
|
+
</tr>
|
|
246
|
+
<tr>
|
|
247
|
+
<td> searchIconClass </td>
|
|
248
|
+
<td> string </td>
|
|
249
|
+
<td> class name for search icon </td>
|
|
250
|
+
</tr>
|
|
251
|
+
<tr>
|
|
252
|
+
<td> inputClass </td>
|
|
253
|
+
<td> string </td>
|
|
254
|
+
<td> class name for search icon </td>
|
|
255
|
+
</tr>
|
|
256
|
+
</table>
|
|
257
|
+
|
|
258
|
+
## Customize styles
|
|
259
|
+
|
|
260
|
+
<table>
|
|
261
|
+
<tr>
|
|
262
|
+
<th> Name </th>
|
|
263
|
+
<th> Description </th>
|
|
264
|
+
</tr>
|
|
265
|
+
<tr>
|
|
266
|
+
<td> containerStyle </td>
|
|
267
|
+
<td> phone Input Container style </td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr>
|
|
270
|
+
<td> buttonStyle </td>
|
|
271
|
+
<td> style for dropdown button </td>
|
|
272
|
+
</tr>
|
|
273
|
+
<tr>
|
|
274
|
+
<td> dropdownStyle </td>
|
|
275
|
+
<td> style for dropdown menu/area </td>
|
|
276
|
+
</tr>
|
|
277
|
+
<tr>
|
|
278
|
+
<td> dropdownListStyle </td>
|
|
279
|
+
<td> style for dropdown list </td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr>
|
|
282
|
+
<td> dropdownIconStyle </td>
|
|
283
|
+
<td> style for dropdown icon </td>
|
|
284
|
+
</tr>
|
|
285
|
+
<tr>
|
|
286
|
+
<td> searchContainerStyle </td>
|
|
287
|
+
<td> search container style </td>
|
|
288
|
+
</tr>
|
|
289
|
+
<tr>
|
|
290
|
+
<td> searchInputStyle </td>
|
|
291
|
+
<td> search input field style </td>
|
|
292
|
+
</tr>
|
|
293
|
+
<tr>
|
|
294
|
+
<td> searchIconStyle </td>
|
|
295
|
+
<td> search icon style </td>
|
|
296
|
+
</tr>
|
|
297
|
+
<tr>
|
|
298
|
+
<td> inputStyle </td>
|
|
299
|
+
<td> input field style </td>
|
|
300
|
+
</tr>
|
|
301
|
+
</table>
|
|
302
|
+
|
|
303
|
+
`note:` version 5 released today. see the [changelogs](https://github.com/siamahnaf198/react-simple-phone-input/releases/tag/v5.0.0)
|
|
304
|
+
|
|
185
305
|
## Contributing
|
|
186
306
|
- Code style changes not allowed
|
|
187
307
|
- Do not create issues about incorrect or missing country data
|
package/package.json
CHANGED