react-simple-phone-input 5.0.9 → 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 +201 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
React Simple Phone Input
|
|
2
|
+
==========
|
|
3
|
+
|
|
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
|
+
|
|
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)
|
|
10
|
+
|
|
11
|
+
- SSR Fiendly
|
|
12
|
+
- Customizable
|
|
13
|
+
- Multi Design
|
|
14
|
+
- Search country
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```shell-script
|
|
19
|
+
$ npm i react-simple-phone-input --save
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```jsx
|
|
25
|
+
import { PhoneInput } from "react-simple-phone-input";
|
|
26
|
+
import "react-simple-phone-input/dist/style.css";
|
|
27
|
+
|
|
28
|
+
<PhoneInput
|
|
29
|
+
country="US"
|
|
30
|
+
placeholder="Add your phone"
|
|
31
|
+
onChange={(data) => console.log(data)}
|
|
32
|
+
/>
|
|
33
|
+
```
|
|
34
|
+
#### [See Demo](https://react-simple-phone-input.vercel.app/)
|
|
35
|
+
|
|
36
|
+
## Options
|
|
37
|
+
<table width="100%">
|
|
38
|
+
<tr>
|
|
39
|
+
<th> Name </th>
|
|
40
|
+
<th> Type </th>
|
|
41
|
+
<th width="30%"> Description </th>
|
|
42
|
+
<th> Is Required </th>
|
|
43
|
+
<th> Example </th>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td> country </td>
|
|
47
|
+
<td> string </td>
|
|
48
|
+
<td> initial country </td>
|
|
49
|
+
<td> required </td>
|
|
50
|
+
<td> "BD" </td>
|
|
51
|
+
</tr>
|
|
52
|
+
<tr>
|
|
53
|
+
<td> placeholder </td>
|
|
54
|
+
<td> string </td>
|
|
55
|
+
<td> Input Field Placeholder Text </td>
|
|
56
|
+
<td> required </td>
|
|
57
|
+
<td> <code>Type your phone number</code> </td>
|
|
58
|
+
</tr>
|
|
59
|
+
<tr>
|
|
60
|
+
<td> value </td>
|
|
61
|
+
<td> string </td>
|
|
62
|
+
<td> Input field state value or default value </td>
|
|
63
|
+
<td> optional </td>
|
|
64
|
+
<td></td>
|
|
65
|
+
</tr>
|
|
66
|
+
|
|
67
|
+
<tr>
|
|
68
|
+
<td> iconComponent </td>
|
|
69
|
+
<td> ReactNode </td>
|
|
70
|
+
<td> Dropdown Icon component for changing default icon </td>
|
|
71
|
+
<td> optional </td>
|
|
72
|
+
<td><code> <Icon icon="icon-name" /> </cpde></td>
|
|
73
|
+
</tr>
|
|
74
|
+
|
|
75
|
+
<tr>
|
|
76
|
+
<td> inputProps </td>
|
|
77
|
+
<td> InputHTMLAttributes </td>
|
|
78
|
+
<td> Props to pass into the input field </td>
|
|
79
|
+
<td> optional </td>
|
|
80
|
+
<td> </td>
|
|
81
|
+
</tr>
|
|
82
|
+
|
|
83
|
+
<tr>
|
|
84
|
+
<td> onlyCountries </td>
|
|
85
|
+
<td> array </td>
|
|
86
|
+
<td> Show only country in dropdown menu with Country Codes </td>
|
|
87
|
+
<td> optional </td>
|
|
88
|
+
<td> ["BD", "US", "AF", "AL"] </td>
|
|
89
|
+
</tr>
|
|
90
|
+
|
|
91
|
+
<tr>
|
|
92
|
+
<td> excludeCountries </td>
|
|
93
|
+
<td> array </td>
|
|
94
|
+
<td> If you want to remove some country to the list. If you give <code>excludeCountries</code> then <code>onlyCountries</code> not works </td>
|
|
95
|
+
<td> optional </td>
|
|
96
|
+
<td> ["AF", "AL"] </td>
|
|
97
|
+
</tr>
|
|
98
|
+
|
|
99
|
+
<tr>
|
|
100
|
+
<td> preferredCountries </td>
|
|
101
|
+
<td> array </td>
|
|
102
|
+
<td> Country codes to show on the top of the dropdown menu </td>
|
|
103
|
+
<td> optional </td>
|
|
104
|
+
<td> ["BD", "US"] </td>
|
|
105
|
+
</tr>
|
|
106
|
+
|
|
107
|
+
<tr>
|
|
108
|
+
<td> searchPlaceholder </td>
|
|
109
|
+
<td> string </td>
|
|
110
|
+
<td> Search input field placeholder </td>
|
|
111
|
+
<td>optional</td>
|
|
112
|
+
<td></td>
|
|
113
|
+
</tr>
|
|
114
|
+
|
|
115
|
+
<tr>
|
|
116
|
+
<td> searchIconComponent </td>
|
|
117
|
+
<td> ReactNode </td>
|
|
118
|
+
<td> If <code>search</code> enabled, custom search icon to show on search bar </td>
|
|
119
|
+
<td> optional </td>
|
|
120
|
+
<td><code> <Icon icon="icon-name" /> </cpde></td>
|
|
121
|
+
</tr>
|
|
122
|
+
|
|
123
|
+
<tr>
|
|
124
|
+
<td> searchProps </td>
|
|
125
|
+
<td> InputHTMLAttributes </td>
|
|
126
|
+
<td> Props to pass into the search input field </td>
|
|
127
|
+
<td> optional </td>
|
|
128
|
+
<td> </td>
|
|
129
|
+
</tr>
|
|
130
|
+
|
|
131
|
+
<tr>
|
|
132
|
+
<td> searchNotFound </td>
|
|
133
|
+
<td> string </td>
|
|
134
|
+
<td> Error message when search result is empty! </td>
|
|
135
|
+
<td> optional </td>
|
|
136
|
+
<td> </td>
|
|
137
|
+
</tr>
|
|
138
|
+
</table>
|
|
139
|
+
|
|
140
|
+
## Other Options
|
|
141
|
+
|
|
142
|
+
<table>
|
|
143
|
+
<tr>
|
|
144
|
+
<th> Name </th>
|
|
145
|
+
<th> Default </th>
|
|
146
|
+
<th> Description </th>
|
|
147
|
+
</tr>
|
|
148
|
+
<tr>
|
|
149
|
+
<td> showDropdownIcon </td>
|
|
150
|
+
<td> true </td>
|
|
151
|
+
<td> Show or Hide dropdown icon </td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td> dialCodeInputField </td>
|
|
155
|
+
<td> false </td>
|
|
156
|
+
<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>
|
|
157
|
+
</tr>
|
|
158
|
+
<tr>
|
|
159
|
+
<td> search </td>
|
|
160
|
+
<td> true </td>
|
|
161
|
+
<td> Show or Hide search input field </td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td> showSearchIcon </td>
|
|
165
|
+
<td> true </td>
|
|
166
|
+
<td> Show or Hide search icon </td>
|
|
167
|
+
</tr>
|
|
168
|
+
</table>
|
|
169
|
+
|
|
170
|
+
## Event
|
|
171
|
+
|
|
172
|
+
<table>
|
|
173
|
+
<tr>
|
|
174
|
+
<th> Event Name </th>
|
|
175
|
+
<th> Description </th>
|
|
176
|
+
<th> Example </th>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr>
|
|
179
|
+
<td> onChange </td>
|
|
180
|
+
<td> To get the value from component </td>
|
|
181
|
+
<td> <code>onChange={(data: string) => console.log(data)}</code> </td>
|
|
182
|
+
</tr>
|
|
183
|
+
</table>
|
|
184
|
+
|
|
185
|
+
## Contributing
|
|
186
|
+
- Code style changes not allowed
|
|
187
|
+
- Do not create issues about incorrect or missing country data
|
|
188
|
+
|
|
189
|
+
## Issues or correction
|
|
190
|
+
If you face any issues, missing data or wrong data about country, you are welcome to create an issue.
|
|
191
|
+
|
|
192
|
+
## Stay in touch
|
|
193
|
+
|
|
194
|
+
- Author - [Siam Ahnaf](https://www.siamahnaf.com/)
|
|
195
|
+
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
|
|
196
|
+
- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)
|
|
197
|
+
- Github - [https://github.com/siamahnaf198](https://github.com/siamahnaf198)
|
|
198
|
+
|
|
199
|
+
## License
|
|
200
|
+
|
|
201
|
+
[](LICENSE)
|
package/package.json
CHANGED