phone-input-shadcn-ui

Enhanced Phone Number Input for Shadcn UI

This project provides a custom phone number input component designed for seamless integration with Shadcn UI. It empowers developers to easily add international phone number fields to their React applications, leveraging libraries like libphonenumber-js and react-phone-number-input for robust functionality. The component supports country selection, automatic formatting, and input validation, with source code available for further customization and adaptation to specific project needs.

Features:

• Shadcn UI Compatibility: Specifically built to work smoothly within the Shadcn UI ecosystem.
• Country Selection: Enables users to choose their country, which then updates the country code and placeholder.
• Automatic Country Code Prefixing: Displays the correct international dialing code based on the selected country.
• Dynamic Formatted Placeholder: Shows an example phone number format tailored to the chosen country, guiding user input.
• Input Value Management: Captures and makes accessible the phone number entered by the user.
• Validation State Indication: Provides a status (e.g., isValid) to reflect the validity of the entered phone number, powered by libphonenumber-js.
• Internationalization (i18n) Support: Allows registration of specific locales using i18n-iso-countries for global applications.
• Based on react-phone-number-input: Leverages the extensive features and reliability of the react-phone-number-input library.
• Utilizes libphonenumber-js: Employs Google's libphonenumber-js for comprehensive phone number parsing, formatting, and validation logic.
• Source Code Availability: The component's code is accessible on GitHub, allowing for inspection and customization.
• Clear Dependency Listing: Specifies required NPM packages (libphonenumber-js, i18n-iso-countries, react-phone-number-input) for straightforward project setup.

Summary:

This Shadcn UI phone number input component offers a developer-centric solution for incorporating international phone number fields into web applications. It features dynamic country selection, automatic country code prefixing, locale-specific placeholders, and robust validation. Built upon established libraries, it aims to enhance user experience in forms requiring phone numbers and is easily integrable into React projects that use Shadcn UI, with customization options available via its source code.