Phone Number ReactCountry-aware phone input for React

Headless hook that handles country selection, digit normalization, calling codes, mask patterns, and phone validation — no masking library needed.

Country-Aware State

Manages the selected country with ISO codes, calling codes, and phone-length rules for 200+ countries out of the box.

Strips non-numeric characters and auto-truncates input to the selected country's max phone length as the user types.

Validates phone length against the selected country's allowed lengths. Returns `isValid` as a plain boolean — no extra library needed.

Returns a mask string like `XXXXX XXXXX` for the selected country. Use it as a placeholder or guide — zero masking dependency.

Returns the calling code for the selected country (e.g. `+91` for India) as a plain string value.

The hook returns raw state and handlers. Bring your own select, input, and styling — works with any React UI.

Ships with bundled country and dial-code metadata. Override with your own data object — no server calls required.

Complete TypeScript types for all return values, options, and custom data shapes. Works with strict mode and React 18/19.

INTERACTIVE HOOK DEMO

Select a country and type numbers to see hook state variables update in real-time.

phone.selectedCountryIndia (IN)

phone.callingCode+91

phone.localPhone""

phone.mask+91 ##### #####

phone.formattedPhone+91 ...

phone.isValidfalse