PhoneNumberInput Component

Overview

PhoneNumberInput is a React component that provides an intuitive interface for users to input phone numbers with country selection. It supports validation, formatting, and geo-location-based country selection.

Features

• Phone number validation and formatting using libphonenumber-js
• Country selection dropdown with search functionality
• Geo-location-based default country detection
• Customizable input appearance and behavior
• Supports country restrictions (allowed/disallowed countries)
• Accessibility-friendly design

Installation

npm install z-phone-number-input

Latest Version

npm install z-phone-number-input@latest

Usage

import {PhoneNumberInput} from 'z-phone-number-input';

const App = () => {
  const handlePhoneNumberChange = (isValid, number, country) => {
    console.log('Phone Number:', number, 'Country:', country, 'Valid:', isValid);
  };

  return (
    <PhoneNumberInput
      value=""
      onChange={handlePhoneNumberChange}
      defaultCountry="us"
      showFlag={true}
      showDialCode={true}
    />
  );
};

export default App;

Props

| Prop Name | Type | Description | |------------------|------|-------------| | value | string | The current phone number input value. | | onChange | (status: boolean, value: string, countryData: CountryData) => void | Called when the phone number changes. | | onBlur | (status: boolean, value: string, countryData: string, number: string, id?: string) => void | Called when input loses focus. | | onSelectFlag | (number: string, countryData: string, value: string, status: boolean) => void | Called when the country flag is selected. | | onError | (isError: boolean) => void | Called when there's a validation error. | | showFlag | boolean | Whether to show the country flag. Default: true. | | showDialCode | boolean | Whether to display the country dial code. Default: false. | | useGeoLocation | boolean | Automatically detect user's country using timezone. Default: true. | | defaultCountry | string | Default country code. Default: 'in'. | | allowedCountries | string[] | List of allowed country codes. | | disallowedCountry | string[] | List of disallowed country codes. | | className | string | Additional CSS class for styling. | | placeholder | string | Placeholder text. Default: 'Enter phone number'. | | style | React.CSSProperties | Custom styles for the input container. | | inputStyle | React.CSSProperties | Custom styles for the input field. | | onFocus | React.FocusEventHandler<HTMLInputElement> | Called when input is focused. | | onCountryChange | (countryCode: string) => void | Called when the country is changed. |

Styling

The component includes basic styles but can be customized with external CSS or inline styles.

License

This project is licensed under the MIT License.

Author

Developed by Zahid