PhoneNumberInput Component

PhoneNumberInput is a customizable React component that provides an easy way to handle international phone numbers with country code selection, validation, and optional search functionality. This component is ideal for applications that need a standardized input format for international phone numbers.

Features

• Select country codes with corresponding flags.
• Validate phone numbers based on country.
• Customizable UI with Tailwind CSS classes.
• Searchable country dropdown list.
• Dark mode support through isDarkMode prop.

Installation

To install the component, use npm:

npm install nextjs-custom-phone-input

Usage

Import the component into your project and use it as shown below:

import PhoneNumberInput from 'nextjs-custom-phone-input';

function App() {
    return (
        <PhoneNumberInput
            onChange={(formattedNumber, fullPhoneNumber, isValid) => console.log({ formattedNumber, fullPhoneNumber, isValid })}
            inputClassName="my-input-class"
            buttonClassName="my-button-class"
            menuClassName="my-menu-class"
            menuItemClassName="my-menu-item-class"
            searchInputClassName="my-search-input-class"
            allowedCountries={['US', 'CA', 'FR']}
            defaultCountry="US"
            isDarkMode={true}
        />
    );
}

Props

isDarkMode

• Type: boolean
• Description: If true, the component renders with dark mode styling. Optional and defaults to false.

forwardRef

• Type: React.RefObject<HTMLInputElement>
• Description: Ref for the phone number input field.

allowedCountries

• Type: CountryCode[]
• Description: Array of allowed country codes (ISO-3166). If not specified, all countries will be available.

defaultCountry

• Type: CountryCode
• Description: Default country code to display initially (e.g., "US").

onChange

• Type: (formattedNumber: string, fullPhoneNumber: string, isValid: boolean) => void
• Description: Function called when the phone number changes, with:
  • formattedNumber: National phone number format.
  • fullPhoneNumber: Full phone number with country code.
  • isValid: Boolean indicating if the number is valid.

onKeyup

• Type: (e: React.KeyboardEvent<HTMLInputElement>) => void
• Description: Optional function triggered on keyup events in the phone number input field.

inputClassName

• Type: string
• Description: Custom class for styling the phone number input.

searchInputClassName

• Type: string
• Description: Custom class for styling the search input in the dropdown.

buttonClassName

• Type: string
• Description: Custom class for styling the country code button.

menuClassName

• Type: string
• Description: Custom class for styling the dropdown menu.

menuItemClassName

• Type: string
• Description: Custom class for styling each dropdown item.

Example Outputs

• formattedNumber: The phone number in a national format (e.g., "555-1234").
• fullPhoneNumber: The complete phone number with country code (e.g., "+1 555-1234").
• isValid: Boolean indicating the validity of the entered phone number.

Styling and Customization

This component accepts Tailwind CSS classes for easy customization. You can use the provided props to apply your custom styles for the input, dropdown menu, search input, and button.

Dependencies

• React: ^17 || ^18
• libphonenumber-js: ^1.9.47
• i18n-iso-countries: ^6.8.0
• react-world-flags: ^1.2.0

License

ISC