@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"
/>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 |