@husseincak/simple-phone-input

Minimal, unstyled phone input for React with:

• country selector
• dial code handling
• E.164 output (+34999111222)
• optional theme CSS files
• zero runtime dependencies (React peer dependency only)

Install

npm install @husseincak/simple-phone-input

Quick Start

import { useState } from 'react'
import PhoneInput from '@husseincak/simple-phone-input'
import '@husseincak/simple-phone-input/themes/default.css'

export default function Example() {
    const [phone, setPhone] = useState('')

    return (
        <PhoneInput
            defaultCountry="es"
            value={phone}
            onChange={setPhone}
            name="phone"
            placeholder="Phone number"
        />
    )
}

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | value | string | undefined | Controlled value in E.164 format when available. | | defaultValue | string | undefined | Initial value for uncontrolled mode. | | defaultCountry | string | "us" | ISO country code (for example "es", "us"). | | onChange | (e164: string) => void | undefined | Called on input change. Returns E.164 string or empty string. | | name | string | undefined | name attribute for the input. | | placeholder | string | undefined | Input placeholder text. | | classNames | ClassNames | {} | Custom class map for full styling control. | | searchIcon | ReactNode | undefined | Optional custom icon in country search. |

Styling

You have 2 options:

1. Import one of the included themes.
2. Style everything with classNames.

Built-in Themes

import '@husseincak/simple-phone-input/themes/basic.css'
import '@husseincak/simple-phone-input/themes/default.css'
import '@husseincak/simple-phone-input/themes/dark.css'
import '@husseincak/simple-phone-input/themes/rounded.css'
import '@husseincak/simple-phone-input/themes/underline.css'
import '@husseincak/simple-phone-input/themes/filled.css'
import '@husseincak/simple-phone-input/themes/glass.css'

classNames keys

{
  wrapper,
  triggerWrap,
  trigger,
  flag,
  dialCode,
  triggerArrow,
  dropdown,
  search,
  searchIcon,
  searchInput,
  list,
  option,
  optionFocused,
  optionFlag,
  optionName,
  optionDialCode,
  input,
}

Notes

• react and react-dom are peer dependencies (>=18).
• Typing + with a full international number auto-detects country by dial code.
• Package is published as ESM + CJS with type definitions.