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
Copy file name to clipboardExpand all lines: site/src/docs/markdown/best_practices.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,11 +24,11 @@ _<sup>*</sup>Except for some small satellite territories, which share number ran
24
24
25
25
## Validate before saving
26
26
27
-
Check the number is valid before storing it, and reject invalid input. Get the validity from [`isValidNumber`](/docs/methods#isvalidnumber) (core library) or the `onChangeValidity` / `validityChange` callback (components). Requires the utils module.
27
+
Check the number is valid before storing it, and reject invalid input. Get the validity from [`isValidNumber`](/docs/methods#isvalidnumber) (vanilla JS library) or the `onChangeValidity` / `validityChange` callback (framework components). Requires the utils module.
28
28
29
29
##### Deriving a user-facing error message
30
30
31
-
When a number is invalid, you'll get an error code (from [`getValidationError`](/docs/methods#getvalidationerror) for the core library, or via the `onChangeErrorCode` / `errorCodeChange` callback for the components). Mapping the error codes to user-facing messages is left to you because the wording belongs to your app. Here is a reasonable starting point:
31
+
When a number is invalid, you'll get an error code (from [`getValidationError`](/docs/methods#getvalidationerror) for the vanilla JS library, or via the `onChangeErrorCode` / `errorCodeChange` callback for the framework components). Mapping the error codes to user-facing messages is left to you because the wording belongs to your app. Here is a reasonable starting point:
[`strictMode`](/docs/options#strictmode) is on by default and rejects non-numeric characters while capping the length at the country's max as the user types. Just as importantly, the rejection shouldn't be silent — by default, [`strictRejectAnimation`](/docs/options#strictrejectanimation) plays a built-in shake/flash animation so the user notices. For richer feedback (e.g. a toast that explains _why_ the input was rejected), listen for the `strict:reject` event (core library) or use the equivalent `onStrictReject` / `strictReject` callback (components).
50
+
[`strictMode`](/docs/options#strictmode) is on by default and rejects non-numeric characters while capping the length at the country's max as the user types. Just as importantly, the rejection shouldn't be silent — by default, [`strictRejectAnimation`](/docs/options#strictrejectanimation) plays a built-in shake/flash animation so the user notices. For richer feedback (e.g. a toast that explains _why_ the input was rejected), listen for the `strict:reject` event (vanilla JS library) or use the equivalent `onStrictReject` / `strictReject` callback (framework components).
Copy file name to clipboardExpand all lines: site/src/docs/markdown/integrations.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
## Choose your integration
4
4
5
-
`intl-tel-input` comes in two flavours: a **vanilla JavaScript library** and a set of native **framework components**. Both offer the same core features — country picker, formatting and validation — so pick the one that matches your stack.
5
+
`intl-tel-input` comes in two flavours: a **vanilla JavaScript library** and a set of native **framework components**. Both offer the same core features — country picker, formatting and validation — so pick the one that matches your stack. Internally, both are powered by the same shared engine (referred to throughout these docs as the **core library**) — the vanilla JS library exposes it directly, while the framework components wrap it.
6
6
7
7
<divclass="iti-integration-choice row g-4 my-4">
8
8
<divclass="col-md-6">
@@ -49,7 +49,7 @@ Technically yes, but our native framework components are the recommended path -
49
49
***Lifecycle handled** — initialisation on mount and `destroy()` on unmount, so you don't leak instances or listeners.
50
50
***Two-way value binding** — pass the number in as a prop and it stays in sync with your app's state, with internal guards to avoid cursor jumps while typing.
51
51
***Typed change callbacks** — `changeNumber`, `changeCountry`, `changeValidity`, and `changeErrorCode` exposed as idiomatic, fully-typed handlers for each framework.
52
-
***Escape hatch** — grab the underlying core library instance via a ref for anything the component doesn't expose directly.
52
+
***Escape hatch** — grab the core library instance via a ref for anything the component doesn't expose directly.
53
53
54
54
**Do the components include all the core library features?**
55
55
Yes — plus more. All [initialisation options](/docs/options) and [methods](/docs/methods) are available through the component props and refs, and on top of that you get the framework-native conveniences like two-way binding and typed callbacks (see above).
Copy file name to clipboardExpand all lines: site/src/docs/markdown/methods.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -122,7 +122,7 @@ Type: `() => boolean`
122
122
123
123
⚠️ **ADVANCED**
124
124
(Note: only returns `true` for valid **mobile** and **fixed_line** numbers by default - see [`allowedNumberTypes`](/docs/options#allowednumbertypes))
125
-
Check if the current number is valid using precise matching rules for each country/area code, etc - [see example](/examples/vanilla-javascript/validation-precise). Note that these rules change each month for various countries around the world, so you need to constantly keep the core library up-to-date (e.g. via an automated script) else **you will start rejecting valid numbers**. For a simpler and more future-proof form of validation, see [`isValidNumber`](/docs/methods#isvalidnumber) above. If validation fails, you can use [`getValidationError`](/docs/methods#getvalidationerror) to get more information. Requires the [utils script to be loaded](/docs/utils#loading-the-utils-script).
125
+
Check if the current number is valid using precise matching rules for each country/area code, etc - [see example](/examples/vanilla-javascript/validation-precise). Note that these rules change each month for various countries around the world, so you need to constantly keep the package up-to-date (e.g. via an automated script) else **you will start rejecting valid numbers**. For a simpler and more future-proof form of validation, see [`isValidNumber`](/docs/methods#isvalidnumber) above. If validation fails, you can use [`getValidationError`](/docs/methods#getvalidationerror) to get more information. Requires the [utils script to be loaded](/docs/utils#loading-the-utils-script).
Copy file name to clipboardExpand all lines: site/src/docs/markdown/utils.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,7 @@ The utils script adds ~260KB on top of the ~30KB core library. There are two way
17
17
Use the [`loadUtils`](/docs/options#loadutils) option to fetch the utils separately. The core library/component loads quickly (~30KB); the ~260KB utils file is fetched in the background after initialisation, so formatting/validation kicks in shortly after the input appears without blocking your initial page load.
18
18
19
19
**Option 2: Use the all-in-one bundle**
20
-
Each distribution ships a companion entry point that bundles utils directly — `intl-tel-input/intlTelInputWithUtils` for the vanilla JavaScript library, `@intl-tel-input/react/with-utils` for React, `@intl-tel-input/vue/with-utils` for Vue, and so on. Everything works out of the box, with no extra configuration. Best if you're already lazy loading the main script, or if the extra ~260KB up front isn't a concern.
20
+
Each distribution ships a companion entry point that bundles utils directly — `intl-tel-input/intlTelInputWithUtils` for the vanilla JavaScript library, `@intl-tel-input/react/with-utils` for React, `@intl-tel-input/vue/with-utils` for Vue, and so on. Everything works out of the box, with no extra configuration. Best if you're already lazy loading the core library, or if the extra ~260KB up front isn't a concern.
21
21
22
22
For exact code, see the quick-start on the relevant docs page: [vanilla JavaScript library](/docs/vanilla-javascript), [React](/docs/react-component), [Vue](/docs/vue-component), [Angular](/docs/angular-component), or [Svelte](/docs/svelte-component).
Copy file name to clipboardExpand all lines: site/src/docs/markdown/vanilla_javascript.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ How to get up and running with the vanilla JavaScript library. See a live demo o
13
13
14
14
## Installation
15
15
16
-
There are two ways to install the core library: [using a bundler](#using-a-bundler) (e.g. Vite, webpack), or [using a script tag](#using-a-script-tag) (e.g. via a CDN).
16
+
There are two ways to install the library: [using a bundler](#using-a-bundler) (e.g. Vite, webpack), or [using a script tag](#using-a-script-tag) (e.g. via a CDN).
17
17
18
18
##### Using a bundler
19
19
@@ -23,7 +23,7 @@ First, install the package:
23
23
npm install intl-tel-input
24
24
```
25
25
26
-
Then, import the JS and CSS, and initialise the core library on your input element:
26
+
Then, import the JS and CSS, and initialise it on your input element:
27
27
28
28
```js
29
29
importintlTelInputfrom"intl-tel-input";
@@ -36,7 +36,7 @@ intlTelInput(input, {
36
36
```
37
37
38
38
> [!NOTE]
39
-
> The utils script (~260KB) is loaded separately. The example above passes a dynamic import to [`loadUtils`](/docs/options#loadutils) — modern bundlers split this into its own lazy-loaded chunk, so it doesn't hit your initial bundle. Alternatively, if the core library is already lazy-loaded in your app, import from `"intl-tel-input/intlTelInputWithUtils"` to bundle utils directly.
39
+
> The utils script (~260KB) is loaded separately. The example above passes a dynamic import to [`loadUtils`](/docs/options#loadutils) — modern bundlers split this into its own lazy-loaded chunk, so it doesn't hit your initial bundle. Alternatively, if the library is already lazy-loaded in your app, import from `"intl-tel-input/intlTelInputWithUtils"` to bundle utils directly.
@@ -68,17 +68,17 @@ See [Best practices](/docs/best-practices) for general advice on loading the uti
68
68
69
69
## Initialisation options
70
70
71
-
The core library has dozens of options for customising its behaviour — country picker, formatting, validation, placeholders, localisation, and more. See the full list on the [Initialisation options](/docs/options) page, or try them interactively in the [playground](/playground).
71
+
The library has dozens of options for customising its behaviour — country picker, formatting, validation, placeholders, localisation, and more. See the full list on the [Initialisation options](/docs/options) page, or try them interactively in the [playground](/playground).
72
72
73
73
74
74
## Methods
75
75
76
-
Once the core library is initialised, you can call methods on the returned instance — e.g. `setNumber`, `setCountry`, `getNumber`, `isValidNumber`. See the full list on the [Methods](/docs/methods) page.
76
+
Once initialised, you can call methods on the returned instance — e.g. `setNumber`, `setCountry`, `getNumber`, `isValidNumber`. See the full list on the [Methods](/docs/methods) page.
77
77
78
78
79
79
## Events
80
80
81
-
The core library triggers the following custom events on the `<input>` element. Listen for them with `input.addEventListener(...)`.
81
+
The library triggers the following custom events on the `<input>` element. Listen for them with `input.addEventListener(...)`.
0 commit comments