open-index/open-npm huggingface dataset:
npm package: @husseincak/simple-phone-input
Description: Minimal, unstyled, zero-dependency phone input with country selector for React
Latest version: 0.1.1

# @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

```bash
npm install @husseincak/simple-phone-input
```

## Quick Start

```tsx
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

```ts
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

```ts
{
  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.