How jackocnr/intl-tel-input works
International Telephone Input is a phone-number entry library with vanilla JavaScript and Angular, React, Svelte, and Vue integrations. Users choose a country and enter a number; the library supports formatting, E.164 output, and validation. The core tree separates UI, country data, formatting, and utility functions, while framework packages expose the component in their respective ecosystems. The site also includes a configurable live playground. The tree and README establish these capabilities, but sampled source is limited, so uncertain internal call paths are not shown.
Main entry points: itiController.ts Playground controller · intlTelInput.ts Core entry · IntlTelInput.ts Angular component · IntlTelInput.tsx React component
Components 18
Core library
- Core entry
packages/core/src/js/intlTelInput.ts - Input and dropdown UI
packages/core/src/js/core/ui.ts - Options and defaults
packages/core/src/js/core/options.ts - Country search
packages/core/src/js/core/countrySearch.ts - Country data
packages/core/src/js/data.ts - Number formatting
packages/core/src/js/format/formatting.ts - Caret handling
packages/core/src/js/format/caret.ts - Formatting and validation utilities
packages/core/src/js/utils.js - Numeral conversion
packages/core/src/js/core/numerals.ts
Framework adapters
- Angular component
packages/angular/src/IntlTelInput.ts - React component
packages/react/src/IntlTelInput.tsx - Svelte component
packages/svelte/src/IntlTelInput.svelte - Vue component
packages/vue/src/IntlTelInput.vue
Site playground
- Playground controller
site/src/playground/js/modules/itiController.ts - Locale selection
site/src/playground/js/modules/locale.ts - Initial country lookup
site/src/js/initialCountryLookup.ts
Other components
- Application user
- Vanilla API
Connections 9
- Application user → Vanilla API: enters number
- Vanilla API → Core entry: initializes
- Application user → Angular component: enters number
- Application user → React component: enters number
- Application user → Svelte component: enters number
- Application user → Vue component: enters number
- Playground controller → Core entry: initializes
- Playground controller → Locale selection: resolves locale
- Playground controller → Initial country lookup: sets lookup