React Phone Input Custom

A React component for inputting and validating phone numbers with international support, featuring an easy-to-use country code selection.

Installation

npm install react-phone-input-custom

or with yarn:

yarn add react-phone-input-custom

Peer Dependencies

This library requires the following peer dependencies:

react (>=19.0.0)
react-dom (>=19.0.0)

Ensure these are installed in your project:

npm install react react-dom

Dependencies

The package depends on the following libraries:

google-libphonenumber (Phone number parsing and validation)
libphonenumber-js (Formatting and validation support)
tailwind (For css and styles)

Usage

import PhoneInput from 'react-phone-input-custom';

function App() {
    return (
        <PhoneInput 
            initialCountryCode="IN" 
            enableRedBorderOnError={false} 
            maxPhoneLength={15} 
            fetchAllCountries={false}
        />
    );
}

export default App;

Customization

The component supports various customization options:

Props

Prop	Type	Default	Description
`fetchAllCountries`	`boolean`	`false`	Fetches all available countries if `true`
`initialCountryCode`	`string`	`'IN'`	Default country code
`enableRedBorderOnError`	`boolean`	`true`	Highlights border red on invalid input
`maxPhoneLength`	`number`	`15`	Maximum length of phone number
`isPhoneNumberValid`	`(isValid: boolean) => void`	`undefined`	Callback for validation state
`containerStyle`	`CSSProperties`	`{}`	Custom styles for container
`inputStyle`	`CSSProperties`	`{}`	Custom styles for input field
`dropdownStyle`	`CSSProperties`	`{}`	Custom styles for dropdown
`inputRef`	`Ref<HTMLInputElement>`	`undefined`	Ref for the input field
`onPhoneChange`	`(data: PhoneData) => void`	`undefined`	Callback triggered on input change

Phone Data Object

The onPhoneChange callback receives an object with the following structure:

{
    dialCode: string;
    countryCode: string;
    nationalFormattedNumber: string;
    internationalFormattedNumber: string;
    e164Number: string;
    mobileNumber: string;
}

API Details

The component internally fetches country data using fetch and leverages google-libphonenumber and libphonenumber-js for parsing and validation.

License

Contributing

Contributions are welcome! Feel free to submit issues and pull requests to the GitHub repository.

Package detail