intl-tel-input 25.12.4 → 25.12.5
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 +10 -30
- package/angular/README.md +23 -2
- package/angular/build/IntlTelInput.js +1 -1
- package/angular/build/IntlTelInputWithUtils.js +283 -331
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput.js +2 -2
- package/build/js/intlTelInput.min.js +2 -2
- package/build/js/intlTelInputWithUtils.js +284 -332
- package/build/js/intlTelInputWithUtils.min.js +2 -2
- package/build/js/utils.js +62 -60
- package/package.json +1 -1
- package/react/README.md +16 -14
- package/react/build/IntlTelInput.cjs +1 -1
- package/react/build/IntlTelInput.js +1 -1
- package/react/build/IntlTelInputWithUtils.cjs +283 -331
- package/react/build/IntlTelInputWithUtils.js +283 -331
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +1 -1
- package/vue/build/IntlTelInputWithUtils.mjs +283 -331
package/react/README.md
CHANGED
|
@@ -4,6 +4,7 @@ A React component wrapper for the [intl-tel-input](https://github.com/jackocnr/i
|
|
|
4
4
|
## Table of Contents
|
|
5
5
|
- [Demo and Examples](#demo-and-examples)
|
|
6
6
|
- [Getting Started](#getting-started)
|
|
7
|
+
- [Utils Script](#utils-script)
|
|
7
8
|
- [Props](#props)
|
|
8
9
|
- [Accessing Instance Methods](#accessing-instance-methods)
|
|
9
10
|
- [Accessing Static Methods](#accessing-static-methods)
|
|
@@ -28,62 +29,63 @@ import "intl-tel-input/styles";
|
|
|
28
29
|
|
|
29
30
|
See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
## Utils Script
|
|
33
|
+
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize), then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js"`.
|
|
32
34
|
|
|
33
35
|
## Props
|
|
34
36
|
Here's a list of all of the current props you can pass to the IntlTelInput React component.
|
|
35
37
|
|
|
36
38
|
**disabled**
|
|
37
39
|
Type: `Boolean`, Default: `false`
|
|
38
|
-
Sets the disabled attribute of both the telephone input and selected country button. _Note: we recommend using this instead of `inputProps.disabled`._
|
|
40
|
+
Sets the disabled attribute of both the telephone input and the selected country button. _Note: we recommend using this instead of `inputProps.disabled`._
|
|
39
41
|
|
|
40
42
|
**initialValue**
|
|
41
43
|
Type: `String`
|
|
42
|
-
The initial value to put in the input. This will get auto-formatted on init (according to `formatOnDisplay` initialisation option). IntlTelInput is an uncontrolled input
|
|
44
|
+
The initial value to put in the input. This will get auto-formatted on init (according to `formatOnDisplay` initialisation option). IntlTelInput is an uncontrolled input and so will ignore any changes to this value.
|
|
43
45
|
|
|
44
46
|
**initOptions**
|
|
45
47
|
Type: `Object`
|
|
46
|
-
An object containing the [initialisation options](https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#initialisation-options) to pass to the plugin.
|
|
48
|
+
An object containing the [initialisation options](https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#initialisation-options) to pass to the plugin. These can be used exactly the same way as with the main JavaScript plugin.
|
|
47
49
|
|
|
48
50
|
**inputProps**
|
|
49
51
|
Type: `Object`
|
|
50
|
-
The props to pass to the input element e.g. `className`, `placeholder`, `required`, `onBlur
|
|
52
|
+
The props to pass to the input element, e.g. `className`, `placeholder`, `required`, `onBlur`, etc. _Note: we recommend using the separate `disabled` prop instead of `inputProps.disabled`._
|
|
51
53
|
|
|
52
54
|
**onChangeCountry**
|
|
53
55
|
Type: `Function`
|
|
54
|
-
A handler to be called when the selected country changes. It will
|
|
56
|
+
A handler to be called when the selected country changes. It will receive the new country iso2 code, e.g. "gb" for the UK.
|
|
55
57
|
|
|
56
58
|
**onChangeErrorCode**
|
|
57
59
|
Type: `Function`
|
|
58
|
-
A handler to be called when the number validation error changes. It will
|
|
60
|
+
A handler to be called when the number validation error changes. It will receive the new error code (or `null`). Requires the [utils script](#utils-script) to be loaded.
|
|
59
61
|
|
|
60
62
|
**onChangeNumber**
|
|
61
63
|
Type: `Function`
|
|
62
|
-
A handler to be called when the number changes.
|
|
64
|
+
A handler to be called when the number changes. For valid numbers (see `onChangeValidity`), it will receive the new number in the standard E.164 format. Requires the [utils script](#utils-script) to be loaded.
|
|
63
65
|
|
|
64
66
|
**onChangeValidity**
|
|
65
67
|
Type: `Function`
|
|
66
|
-
A handler to be called when the number validity changes e.g. to true/false. It will
|
|
68
|
+
A handler to be called when the number validity changes, e.g. to true/false. It will receive the new isValid boolean. Requires the [utils script](#utils-script) to be loaded.
|
|
67
69
|
|
|
68
70
|
**usePreciseValidation**
|
|
69
71
|
Type: `Boolean`, Default: `false`
|
|
70
|
-
By default we use `isValidNumber` for validation, but if you'd rather use `isValidNumberPrecise
|
|
72
|
+
By default, we use `isValidNumber` for validation, but if you'd rather use `isValidNumberPrecise`, you can set this to `true`.
|
|
71
73
|
|
|
72
74
|
## Accessing Instance Methods
|
|
73
75
|
|
|
74
|
-
You can access all of the plugin's [instance methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#instance-methods) (`setNumber`, `setCountry`, `setPlaceholderNumberType
|
|
76
|
+
You can access all of the plugin's [instance methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#instance-methods) (`setNumber`, `setCountry`, `setPlaceholderNumberType`, etc) by passing a ref into the IntlTelInput component (using the `ref` prop), and then calling `ref.current.getInstance()`, e.g. `ref.current.getInstance().setNumber(...);`. See the [Set Number demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/set-number/SetNumberApp.tsx) for a full example. You can also access the input DOM element in a similar way: `ref.current.getInput()`.
|
|
75
77
|
|
|
76
78
|
## Accessing Static Methods
|
|
77
79
|
|
|
78
|
-
You can access all of the plugin's [static methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#static-methods) by importing `intlTelInput` from the same file as the
|
|
80
|
+
You can access all of the plugin's [static methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#static-methods) by importing `intlTelInput` from the same file as the React component, e.g. `import { intlTelInput } from "intl-tel-input/react"` (note the lower case "i" in "intlTelInput"). You can then use this as you would with the main plugin, e.g. `intlTelInput.getCountryData()` or `intlTelInput.utils.numberType` etc.
|
|
79
81
|
|
|
80
82
|
## Troubleshooting
|
|
81
83
|
|
|
82
|
-
**Error when
|
|
84
|
+
**Error when toggling presence of IntlTelInput component**
|
|
83
85
|
|
|
84
86
|
Error message: `Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.`
|
|
85
87
|
|
|
86
|
-
Solution: wrap the component in a div e.g.
|
|
88
|
+
Solution: wrap the component in a div, e.g.
|
|
87
89
|
|
|
88
90
|
```js
|
|
89
91
|
{showIntlTelInput && (
|