phone-input-lib

Phone Input Library

A lightweight, developer-friendly npm library that provides a phone number input component with flags, country codes, and Tailwind support.

Compatibility Note

This library is compatible with React 16.8+ and has been tested with multiple React versions to ensure broad compatibility.

Features

• 🌍 Country selector with flags and dial codes
• ✅ Phone number validation using libphonenumber-js
• 🎨 TailwindCSS compatible - pass your own classes
• 📦 Lightweight - only essential dependencies
• ⌨️ TypeScript support - fully typed components and hooks
• 🌐 International formatting support

Installation

npm install phone-input-lib

Usage

Basic Usage

import { PhoneInput } from 'phone-input-lib';

function MyComponent() {
  const [phone, setPhone] = useState('');

  return <PhoneInput value={phone} onChange={setPhone} />;
}

With TailwindCSS Styling

import { PhoneInput } from 'phone-input-lib';

function MyComponent() {
  const [phone, setPhone] = useState('');

  return (
    <PhoneInput
      value={phone}
      onChange={setPhone}
      className="flex gap-2 items-center"
      inputClassName="border p-2 rounded"
      selectClassName="p-2"
    />
  );
}

Without Flags

import { PhoneInput } from 'phone-input-lib';

function MyComponent() {
  const [phone, setPhone] = useState('');

  return <PhoneInput value={phone} onChange={setPhone} showFlags={false} />;
}

API

PhoneInput Props

Prop	Type	Default	Description
value	string	''	The phone number value
onChange	(value: string) => void	required	Callback when phone number changes
defaultCountry	string	'us'	Default selected country ISO code
className	string	''	CSS class for the container
inputClassName	string	''	CSS class for the input field
selectClassName	string	''	CSS class for the country select
showFlags	boolean	true	Whether to show country flags
disabled	boolean	false	Whether the input is disabled
placeholder	string	'Phone number'	Input placeholder text
required	boolean	false	Whether the input is required
error	boolean	false	Whether to show error state

Returns an object with:

• isValid: boolean - whether the phone number is valid
• formattedValue: string - formatted phone number
• nationalFormat: string - national format of the phone number
• internationalFormat: string - international format of the phone number
• e164Format: string - E.164 format of the phone number
• countryCode: string - detected country code

Components

CountrySelect

A standalone country selector component.

import { CountrySelect } from 'phone-input-lib';

function MyComponent() {
  const [country, setCountry] = useState('us');

  return (
    <CountrySelect
      value={country}
      onChange={setCountry}
      className="p-2 border rounded"
    />
  );
}

FlagIcon

A standalone flag icon component.

import { FlagIcon } from 'phone-input-lib';

function MyComponent() {
  return <FlagIcon country={countryData} className="mr-2" />;
}

License

MIT