You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Advanced phone input component for [Ant Design](https://github.com/ant-design/ant-design) that provides support for all
10
-
countries and is compatible with [`antd`](https://github.com/ant-design/ant-design) 4 and 5 versions. It has built-in
11
-
support for area codes and provides [strict validation](#validation) to ensure the entered numbers are valid. This
12
-
open-source project is designed to simplify the process of collecting phone numbers from users.
13
-
14
-
## Installation
15
-
16
-
```shell
17
-
npm i antd-phone-input
18
-
```
19
-
20
-
```shell
21
-
yarn add antd-phone-input
22
-
```
23
-
24
-
## Usage
25
-
26
-
The library is designed to work with the `4.x` and `5.x` series of versions in the same way. It can be used as a regular
27
-
Ant [Input](https://ant.design/components/input) (see the sample below). More usage examples can be found in
28
-
the [examples](examples) directory.
29
-
30
-
```javascript
31
-
importReactfrom"react";
32
-
importFormItemfrom"antd/es/form/FormItem";
33
-
importPhoneInputfrom"antd-phone-input";
34
-
35
-
constDemo= () => {
36
-
return (
37
-
<FormItem name="phone">
38
-
<PhoneInput enableSearch/>
39
-
</FormItem>
40
-
)
41
-
}
42
-
```
9
+
Advanced phone input component for Material UI that leverages the [react-phone-hooks](https://www.npmjs.com/package/react-phone-hooks) supporting all countries. The package is compatible with [antd](https://github.com/ant-design/ant-design) 4 and 5 versions. It provides built-in support for area codes and strict validation.
43
10
44
11
## Value
45
12
46
-
The value of the component is an object containing the parts of the phone number. This format of value gives a wide
47
-
range of opportunities for handling the data in your desired way.
13
+
The value of the component is an object containing the parts of the phone number. This format of value gives a wide range of opportunities for handling the data in your desired way.
48
14
49
15
```javascript
50
16
{
@@ -58,31 +24,35 @@ range of opportunities for handling the data in your desired way.
58
24
59
25
## Validation
60
26
61
-
The `valid` function of the value object returns the current validity of the entered phone number based on the selected
62
-
country. So this can be used in a `validator` like this:
27
+
The validation is checked by the `valid` function of the value object that returns a boolean value. An example with the [react-hook-form](https://www.npmjs.com/package/react-hook-form) is shown below:
63
28
64
29
```javascript
30
+
importReactfrom"react";
31
+
importPhoneInputfrom"antd-phone-input";
32
+
importFormItemfrom"antd/es/form/FormItem";
33
+
65
34
constvalidator= (_, {valid}) => {
66
35
// if (valid(true)) return Promise.resolve(); // strict validation
67
36
if (valid()) returnPromise.resolve(); // non-strict validation
68
37
returnPromise.reject("Invalid phone number");
69
38
}
70
39
71
-
return (
72
-
<FormItem rules={[{validator}]}>
73
-
<PhoneInput/>
74
-
</FormItem>
75
-
)
40
+
constDemo= () => {
41
+
return (
42
+
<FormItem name="phone" rules={[{validator}]}>
43
+
<PhoneInput enableSearch/>
44
+
</FormItem>
45
+
)
46
+
}
47
+
48
+
exportdefaultDemo;
76
49
```
77
50
78
-
By default, the `valid` function validates the phone number based on the possible supported lengths of the selected
79
-
country. But it also supports a strict validation that apart from the length also checks if the area code is valid for
80
-
the selected country. To enable strict validation, pass `true` as the first argument of the `valid` function.
51
+
The `valid` function primarily checks if a phone number has a length appropriate for its specified country. In addition, a more comprehensive validation can be performed, including verifying the dial and area codes' accuracy for the selected country. To activate the strict validation, pass `true` as the first argument to the `valid` function.
81
52
82
53
## Props
83
54
84
-
Apart from the below-described phone-specific properties, all [Input](https://ant.design/components/input#input)
85
-
properties that are supported by the used `antd` version, can be applied to the phone input component.
55
+
Apart from the phone-specific properties described below, all [Input](https://ant.design/components/input#input) properties supported by the used Ant Design version can be applied to the phone input component.
@@ -100,8 +70,7 @@ properties that are supported by the used `antd` version, can be applied to the
100
70
101
71
## Contribute
102
72
103
-
Any contribution is welcome. If you have any ideas or suggestions, feel free to open an issue or a pull request. And
104
-
don't forget to add tests for your changes.
73
+
Any contribution is welcome. Don't hesitate to open an issue or discussion if you have questions about your project's usage and integration. For ideas or suggestions, please open a pull request. Your name will shine on our contributors' list. Be proud of what you build!
0 commit comments