Skip to content

Commit f7dd1e7

Browse files
committed
Docs: more consistent naming
1 parent 16e72f3 commit f7dd1e7

5 files changed

Lines changed: 14 additions & 14 deletions

File tree

site/src/docs/markdown/best_practices.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ _<sup>*</sup>Except for some small satellite territories, which share number ran
2424

2525
## Validate before saving
2626

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.
2828

2929
##### Deriving a user-facing error message
3030

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:
3232

3333
```js
3434
const getErrorMessage = (number, errorCode) => {
@@ -47,7 +47,7 @@ const getErrorMessage = (number, errorCode) => {
4747

4848
## Keep strict mode on, with rejection feedback
4949

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 (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).
5151

5252
## Set the initial country
5353

site/src/docs/markdown/integrations.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Choose your integration
44

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.
66

77
<div class="iti-integration-choice row g-4 my-4">
88
<div class="col-md-6">
@@ -49,7 +49,7 @@ Technically yes, but our native framework components are the recommended path -
4949
* **Lifecycle handled** — initialisation on mount and `destroy()` on unmount, so you don't leak instances or listeners.
5050
* **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.
5151
* **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.
5353

5454
**Do the components include all the core library features?**
5555
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).

site/src/docs/markdown/methods.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ Type: `() => boolean`
122122

123123
⚠️ **ADVANCED**
124124
(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).
126126

127127
```js
128128
const isValid = iti.isValidNumberPrecise();

site/src/docs/markdown/utils.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ The utils script adds ~260KB on top of the ~30KB core library. There are two way
1717
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.
1818

1919
**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.
2121

2222
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).
2323

site/src/docs/markdown/vanilla_javascript.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ How to get up and running with the vanilla JavaScript library. See a live demo o
1313

1414
## Installation
1515

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).
1717

1818
##### Using a bundler
1919

@@ -23,7 +23,7 @@ First, install the package:
2323
npm install intl-tel-input
2424
```
2525

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:
2727

2828
```js
2929
import intlTelInput from "intl-tel-input";
@@ -36,7 +36,7 @@ intlTelInput(input, {
3636
```
3737

3838
> [!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.
4040
4141
##### Using a script tag
4242

@@ -48,7 +48,7 @@ First, add the CSS:
4848
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@27.1.3/dist/css/intlTelInput.css">
4949
```
5050

51-
Then, add the core library script and initialise it on your input element:
51+
Then, add the script and initialise it on your input element:
5252

5353
```html
5454
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@27.1.3/dist/js/intlTelInput.min.js"></script>
@@ -68,17 +68,17 @@ See [Best practices](/docs/best-practices) for general advice on loading the uti
6868

6969
## Initialisation options
7070

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).
7272

7373

7474
## Methods
7575

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.
7777

7878

7979
## Events
8080

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(...)`.
8282

8383
##### countrychange
8484

0 commit comments

Comments
 (0)