intl-tel-input is a mature, widely-used frontend library for international telephone number input. It provides a rich set of features including country selection with search, real-time phone number formatting, validation (powered by Google's libphonenumber), and E.164 extraction. The library is framework-agnostic at its core, with official thin wrappers for React, Vue, Angular, and Svelte, making it easy to integrate into any modern web stack. The architecture follows a modular monorepo pattern: the core package (`packages/core`) contains the main JavaScript class, UI logic, country data, locale translations, and formatting/validation utilities. The framework wrappers are minimal adapters that re-export the core functionality with framework-specific props, events, and lifecycle management. A separate static documentation site (`site/`) provides interactive examples, a playground for testing options, and generated code snippets for all supported frameworks. The codebase demonstrates strong engineering practices: TypeScript throughout, extensive unit/integration/e2e tests (Vitest and Playwright), custom build scripts (esbuild, Closure Compiler for libphonenumber), and a well-organized locale system with 50+ translations. Key reusable components include the numeral conversion logic, country search algorithm, and caret positioning helper, which can be extracted for other projects requiring digit script normalization, token-based search, or input formatting.
This repository provides a React component for international phone number input. It allows users to select a country from a dropdown (with flag icons) and input a phone number, which is formatted and validated according to the selected country's numbering plan. The component supports various formats (national, international) and integrates with popular form libraries like React Hook Form. It is built with a modular architecture, separating concerns into distinct components for country selection, input handling, and utility functions for phone number parsing and formatting. The library emphasizes reusability and customization through props that allow overriding components (input, country select, flags), providing custom metadata, and adjusting behavior (e.g., making the country calling code non-editable). It includes comprehensive TypeScript definitions and supports multiple distribution formats (ESM, CJS, UMD).