PhoneInputComponent 📱

A customizable and responsive React phone input component with country code dropdown, formatting, and validation support.

📦 Installation

npm install your-phone-input-package-name

🚀 Usage

import PhoneInputComponent from 'your-phone-input-package-name';

<PhoneInputComponent
  phoneValues={{ number: '', editNumber: '', editCountryCode: '' }}
  handlePhoneChange={(data) => console.log(data)}
  defaultCountryCode="91"
  PreferredCountryCodes={["91", "1"]}
  setError={(msg) => console.error(msg)}
  error={error}
  CombinedToSeperate={false}
  containerCss="myContainer"
  selectedFlagCss="myFlag"
  selectedCountryCss="mySelectedCountry"
  dropdownCss="myDropdown"
  searchInputCss="mySearchInput"
  ulCss="myUl"
  PreferredliCss="myPreferredLi"
  filteredliCss="myFilteredLi"
  liCss="myLi"
  inputCss="myInput"
  validationObject={true}
  requiredError="Phone number required."
  setTempErrorOut={(tempErr) => console.warn(tempErr)}
  onFocus={() => console.log('Focused')}
  onClickOutside={() => console.log('Clicked outside')}
  inputTriggers={{ autoFocus: true }}
  addedData={[{ name: "Atlantis", code: "at", dialingCode: "999", phoneNumberFormat: "0##########" }]}
/>

🧩 Props

| Prop | Type | Description | | ----------------------- | ----------- | ---------------------------------------------------------------------------------------- | | phoneValues | object | Current phone number data: { number, editNumber, editCountryCode }. | | handlePhoneChange | function | Callback triggered when phone data changes. | | PreferredCountryCodes | string[] | Country codes to show at top of dropdown. | | defaultCountryCode | string | Default country dialing code (e.g., "91"). | | setError | function | Callback to set error messages. | | error | string | Error message to display (used for styling). | | CombinedToSeperate | boolean | When true, separates country code and number in state handling. | | dropdownArrow | ReactNode | Custom SVG or element for dropdown arrow. | | containerCss | string | Class name for outer container. | | selectedFlagCss | string | Class name for selected flag container. | | selectedCountryCss | string | Class name for selected country list item. | | dropdownCss | string | Class name for dropdown wrapper. | | searchInputCss | string | Class name for search input field. | | ulCss | string | Class name for <ul> country list. | | PreferredliCss | string | Class name for preferred countries <li>. | | filteredliCss | string | Class name for filtered countries <li>. | | liCss | string | Default class for country <li> entries. | | inputCss | string | Class name for the phone <input> field. | | validationObject | boolean | If true, validation errors use setTempError, else setError. | | requiredError | string | Message shown if input is empty. | | setTempErrorOut | function | Callback to expose temporary error state. | | onFocus | function | Called when the input is focused. | | onClickOutside | function | Triggered when user clicks outside the input. | | inputTriggers | object | Additional input props (e.g., autoFocus, placeholder). | | addedData | Array | Additional country objects to include: { name, code, dialingCode, phoneNumberFormat }. |

🧪 Features

• Live formatting based on country-specific patterns
• Supports dynamic validation
• Add your own countries
• Fully stylable via className props
• Preferred country ordering
• Controlled via phoneValues

🎨 Styling

The component includes internal styles, but can be overridden with your own class names passed to the CSS-related props.

Flag icons must be included using a CSS sprite (typically via .flag and .flag.<country-code>), or imported from your preferred source.

📄 License

MIT

👤 Author

Made with ❤️ by Om Javheri

• GitHub: @om-javheri
• LinkedIn: Om Javheri