$ show catamphetamine/react-phone-number-input
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).
The LLM identified 3 files worth highlighting for reuse:
A custom hook for managing refs that updates the ref value when the callback changes without causing unnecessary re-renders. It is self-contained, has zero internal dependencies, and demonstrates a clean pattern for ref forwarding in React components that can be reused in any project needing stable ref handling.
A custom hook that encapsulates keyboard event handling for input fields, specifically preventing invalid characters (like '+' in the middle) and managing cursor position. It isolates complex DOM interaction logic into a reusable hook with minimal dependencies, making it suitable for extraction into other input components requiring similar keyboard behavior.
A pure function that determines the appropriate prefix to display in the phone number input based on the selected country, current value, and configuration flags. It has no side effects, no React dependencies, and relies only on external libphonenumber-js utilities, making it highly reusable in any context requiring phone number formatting logic.