@mshafiqyajid/react-phone-input
Headless phone input hook and styled component. Country selector with flag emoji, dial code, 30+ countries, E.164 output.
Playground #
Props
TSX
import { PhoneInputStyled } from "@mshafiqyajid/react-phone-input/styled";
import "@mshafiqyajid/react-phone-input/styles.css";
<PhoneInputStyled
value={value}
onChange={setValue}
/>Install #
npm install @mshafiqyajid/react-phone-inputQuick start #
import { PhoneInputStyled } from "@mshafiqyajid/react-phone-input/styled";
import "@mshafiqyajid/react-phone-input/styles.css";
const [phone, setPhone] = useState("");
<PhoneInputStyled
value={phone}
onChange={setPhone}
defaultCountry="US"
label="Phone number"
tone="primary"
/>Headless #
import { usePhoneInput } from "@mshafiqyajid/react-phone-input";
const { inputProps, country, setCountry, dialCode, isValid } = usePhoneInput({
defaultCountry: "US",
});
return (
<div className="phone">
<button onClick={() => setCountry("GB")}>{country} (+{dialCode})</button>
<input {...inputProps} aria-invalid={!isValid} />
</div>
);API #
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled phone number value |
| defaultValue | string | "" | Uncontrolled initial value |
| onChange | (v) => void | — | Called on change |
| defaultCountry | string | "US" | ISO-2 country code default |
| showFlag | boolean | true | Show flag emoji in selector |
| label | string | — | Visible label |
| hint | string | — | Helper text below input |
| error | string | — | Error message (overrides hint) |
| size | "sm" | "md" | "lg" | "md" | Input size |
| tone | "neutral" | "primary" | "success" | "danger" | "neutral" | Color tone |
| disabled | boolean | false | Disable interaction |
| countries | string[] | — | Whitelist of ISO-2 country codes |
| onCountryChange | (country) => void | — | Country change callback |
| outputFormat | "national" | "international" | "e164" | "national" | Output format for onChange value |
| readOnly | boolean | false | Read-only input |
| preferredCountries | string[] | — | ISO-2 codes to pin to the top of the dropdown (rendered above a divider). |
| searchable | boolean | true | Show a search field at the top of the country dropdown. |
| searchPlaceholder | string | "Search..." | Placeholder for the country search input. |
| disableCountrySelector | boolean | false | Lock the country to defaultCountry — hides the dropdown trigger. |