react-simple-phone-input 5.1.1 → 5.1.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 +12 -133
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
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 mixed up with your designed theme and give a fluent vibeable 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 Fiendly
|
|
12
12
|
- Customizable
|
|
13
13
|
- Multi Design
|
|
14
|
-
- Search
|
|
15
|
-
- Smallest Bundle Size (About 98kb)
|
|
16
|
-
- Typescript support
|
|
14
|
+
- Search country
|
|
17
15
|
|
|
18
16
|
## Installation
|
|
19
17
|
|
|
@@ -21,16 +19,16 @@ A simple and customizable react phone number dropdown component. It can mix up w
|
|
|
21
19
|
$ npm i react-simple-phone-input --save
|
|
22
20
|
```
|
|
23
21
|
|
|
24
|
-
##
|
|
22
|
+
## Installation
|
|
25
23
|
|
|
26
24
|
```jsx
|
|
27
|
-
import { PhoneInput
|
|
25
|
+
import { PhoneInput } from "react-simple-phone-input";
|
|
28
26
|
import "react-simple-phone-input/dist/style.css";
|
|
29
27
|
|
|
30
28
|
<PhoneInput
|
|
31
29
|
country="US"
|
|
32
30
|
placeholder="Add your phone"
|
|
33
|
-
onChange={(data
|
|
31
|
+
onChange={(data) => console.log(data)}
|
|
34
32
|
/>
|
|
35
33
|
```
|
|
36
34
|
#### [See Demo](https://react-simple-phone-input.vercel.app/)
|
|
@@ -71,7 +69,7 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
71
69
|
<td> ReactNode </td>
|
|
72
70
|
<td> Dropdown Icon component for changing default icon </td>
|
|
73
71
|
<td> optional </td>
|
|
74
|
-
<td><code> <Icon icon="icon-name" /> </
|
|
72
|
+
<td><code> <Icon icon="icon-name" /> </cpde></td>
|
|
75
73
|
</tr>
|
|
76
74
|
|
|
77
75
|
<tr>
|
|
@@ -119,7 +117,7 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
119
117
|
<td> ReactNode </td>
|
|
120
118
|
<td> If <code>search</code> enabled, custom search icon to show on search bar </td>
|
|
121
119
|
<td> optional </td>
|
|
122
|
-
<td><code> <Icon icon="icon-name" /> </
|
|
120
|
+
<td><code> <Icon icon="icon-name" /> </cpde></td>
|
|
123
121
|
</tr>
|
|
124
122
|
|
|
125
123
|
<tr>
|
|
@@ -167,16 +165,6 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
167
165
|
<td> true </td>
|
|
168
166
|
<td> Show or Hide search icon </td>
|
|
169
167
|
</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
168
|
</table>
|
|
181
169
|
|
|
182
170
|
## Event
|
|
@@ -189,120 +177,11 @@ import "react-simple-phone-input/dist/style.css";
|
|
|
189
177
|
</tr>
|
|
190
178
|
<tr>
|
|
191
179
|
<td> onChange </td>
|
|
192
|
-
<td> To get the value from component
|
|
193
|
-
|
|
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>
|
|
180
|
+
<td> To get the value from component </td>
|
|
181
|
+
<td> <code>onChange={(data: string) => console.log(data)}</code> </td>
|
|
301
182
|
</tr>
|
|
302
183
|
</table>
|
|
303
184
|
|
|
304
|
-
`note:` version 5 released. see the [changelogs](https://github.com/siamahnaf198/react-simple-phone-input/releases/tag/v5.0.0)
|
|
305
|
-
|
|
306
185
|
## Contributing
|
|
307
186
|
- Code style changes not allowed
|
|
308
187
|
- Do not create issues about incorrect or missing country data
|
|
@@ -315,8 +194,8 @@ If you face any issues, missing data or wrong data about country, you are welcom
|
|
|
315
194
|
- Author - [Siam Ahnaf](https://www.siamahnaf.com/)
|
|
316
195
|
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
|
|
317
196
|
- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)
|
|
318
|
-
- Github - [https://github.com/
|
|
197
|
+
- Github - [https://github.com/siamahnaf198](https://github.com/siamahnaf198)
|
|
319
198
|
|
|
320
199
|
## License
|
|
321
200
|
|
|
322
|
-
[](LICENSE)
|
package/package.json
CHANGED