react-phone-number-input-pro 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +185 -185
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
10
10
|
<!-- Changes for the next release go here -->
|
|
11
11
|
<!-- Format: ### Added / ### Fixed / ### Changed -->
|
|
12
12
|
|
|
13
|
+
## [1.0.2] - 2026-07-02
|
|
14
|
+
|
|
15
|
+
### Fixed
|
|
16
|
+
- Fixed the GitHub repository URL in `package.json` to point to the correct repository
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## [1.0.1] - 2026-07-01
|
|
20
|
+
|
|
21
|
+
### Fixed
|
|
22
|
+
- Fixed corrupted encoding of emojis and special characters in the README for the npm registry page
|
|
23
|
+
- Relaxed CI pipeline strictness and resolved minor internal ESLint warnings
|
|
24
|
+
|
|
13
25
|
## [1.0.0] - 2026-06-26
|
|
14
26
|
|
|
15
27
|
### Added
|
package/README.md
CHANGED
|
@@ -1,185 +1,185 @@
|
|
|
1
|
-
|
|
2
|
-
> A zero-dependency React component for international phone number input with country selection, auto-formatting, and validation for 240+ countries.
|
|
3
|
-
|
|
4
|
-
[](https://www.npmjs.com/package/react-phone-number-input-pro)
|
|
5
|
-
[](https://bundlephobia.com/package/react-phone-number-input-pro)
|
|
6
|
-
[](LICENSE)
|
|
7
|
-
[](https://www.typescriptlang.org)
|
|
8
|
-
|
|
9
|
-
## Features
|
|
10
|
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
## Installation
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
npm install react-phone-number-input-pro
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
---
|
|
31
|
-
|
|
32
|
-
## Quick Start
|
|
33
|
-
|
|
34
|
-
```tsx
|
|
35
|
-
import { PhoneInput } from 'react-phone-number-input-pro';
|
|
36
|
-
import 'react-phone-number-input-pro/styles';
|
|
37
|
-
|
|
38
|
-
function MyForm() {
|
|
39
|
-
return (
|
|
40
|
-
<PhoneInput
|
|
41
|
-
defaultCountry="auto"
|
|
42
|
-
onChange={(value, meta) => {
|
|
43
|
-
console.log(value); // "+919876543210"
|
|
44
|
-
console.log(meta.isValid); // true
|
|
45
|
-
console.log(meta.country); // "IN"
|
|
46
|
-
}}
|
|
47
|
-
/>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
---
|
|
53
|
-
|
|
54
|
-
## Props
|
|
55
|
-
|
|
56
|
-
| Prop | Type | Default | Description |
|
|
57
|
-
|---|---|---|---|
|
|
58
|
-
| `value` | `string` |
|
|
59
|
-
| `onChange` | `(value, meta) => void` |
|
|
60
|
-
| `defaultCountry` | `string` | `"auto"` | ISO code or `"auto"` to detect from browser |
|
|
61
|
-
| `placeholder` | `string` | `"Phone number"` | Input placeholder |
|
|
62
|
-
| `disabled` | `boolean` | `false` | Disables the component |
|
|
63
|
-
| `error` | `boolean` | `false` | Forces error state (red border) |
|
|
64
|
-
| `className` | `string` |
|
|
65
|
-
| `style` | `CSSProperties` |
|
|
66
|
-
| `name` | `string` |
|
|
67
|
-
| `id` | `string` |
|
|
68
|
-
| `required` | `boolean` |
|
|
69
|
-
| `onBlur` | `() => void` |
|
|
70
|
-
| `onFocus` | `() => void` |
|
|
71
|
-
|
|
72
|
-
### `onChange` meta object
|
|
73
|
-
|
|
74
|
-
```ts
|
|
75
|
-
interface PhoneChangeMeta {
|
|
76
|
-
country: string; // "IN"
|
|
77
|
-
dialCode: string; // "+91"
|
|
78
|
-
nationalNumber: string; // "98765 43210" (formatted)
|
|
79
|
-
rawNumber: string; // "9876543210" (digits only)
|
|
80
|
-
isValid: boolean; // true
|
|
81
|
-
}
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
---
|
|
85
|
-
|
|
86
|
-
## Headless Hook
|
|
87
|
-
|
|
88
|
-
Build your own UI while using all the logic:
|
|
89
|
-
|
|
90
|
-
```tsx
|
|
91
|
-
import { usePhoneInput } from 'react-phone-number-input-pro';
|
|
92
|
-
|
|
93
|
-
function CustomPhoneInput() {
|
|
94
|
-
const {
|
|
95
|
-
country,
|
|
96
|
-
setCountry,
|
|
97
|
-
nationalNumber,
|
|
98
|
-
setNationalNumber,
|
|
99
|
-
formatted,
|
|
100
|
-
fullNumber,
|
|
101
|
-
isValid,
|
|
102
|
-
error,
|
|
103
|
-
reset,
|
|
104
|
-
} = usePhoneInput({ defaultCountry: 'auto' });
|
|
105
|
-
|
|
106
|
-
return (
|
|
107
|
-
<div>
|
|
108
|
-
<span>{country.dialCode}</span>
|
|
109
|
-
<input
|
|
110
|
-
value={formatted}
|
|
111
|
-
onChange={(e) => setNationalNumber(e.target.value)}
|
|
112
|
-
/>
|
|
113
|
-
{error && <p>{error}</p>}
|
|
114
|
-
</div>
|
|
115
|
-
);
|
|
116
|
-
}
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
## Theming with CSS Variables
|
|
122
|
-
|
|
123
|
-
```css
|
|
124
|
-
.my-phone-input {
|
|
125
|
-
--rpi-border-radius: 12px;
|
|
126
|
-
--rpi-border-color: #8b5cf6;
|
|
127
|
-
--rpi-border-color-focus:#7c3aed;
|
|
128
|
-
--rpi-border-color-valid: #10b981;
|
|
129
|
-
--rpi-border-color-error: #f43f5e;
|
|
130
|
-
--rpi-font-size: 1rem;
|
|
131
|
-
--rpi-height: 52px;
|
|
132
|
-
--rpi-trigger-width: 110px;
|
|
133
|
-
}
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
```tsx
|
|
137
|
-
<PhoneInput className="my-phone-input" defaultCountry="auto" />
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
### Available CSS Variables
|
|
141
|
-
|
|
142
|
-
| Variable | Default | Description |
|
|
143
|
-
|---|---|---|
|
|
144
|
-
| `--rpi-font-size` | `0.9375rem` | Text size |
|
|
145
|
-
| `--rpi-height` | `46px` | Input height |
|
|
146
|
-
| `--rpi-border-color` | `#d1d5db` | Border color |
|
|
147
|
-
| `--rpi-border-color-focus` | `#6366f1` | Focus border |
|
|
148
|
-
| `--rpi-border-color-valid` | `#22c55e` | Valid border |
|
|
149
|
-
| `--rpi-border-color-error` | `#ef4444` | Error border |
|
|
150
|
-
| `--rpi-border-radius` | `10px` | Corner radius |
|
|
151
|
-
| `--rpi-bg` | `#ffffff` | Background |
|
|
152
|
-
| `--rpi-trigger-width` | `96px` | Country selector width |
|
|
153
|
-
| `--rpi-dropdown-width` | `300px` | Dropdown panel width |
|
|
154
|
-
| `--rpi-dropdown-max-height` | `300px` | Dropdown scroll height |
|
|
155
|
-
|
|
156
|
-
---
|
|
157
|
-
|
|
158
|
-
## Using Utilities Directly
|
|
159
|
-
|
|
160
|
-
```tsx
|
|
161
|
-
import { validatePhone, countries, getCountryByCode } from 'react-phone-number-input-pro';
|
|
162
|
-
|
|
163
|
-
// Validate a number
|
|
164
|
-
const { isValid, error } = validatePhone('9876543210', 'IN');
|
|
165
|
-
|
|
166
|
-
// Look up a country
|
|
167
|
-
const india = getCountryByCode('IN');
|
|
168
|
-
// { name: "India", code: "IN", dialCode: "+91" }
|
|
169
|
-
|
|
170
|
-
// Access the full list
|
|
171
|
-
console.log(countries.length); // 240
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
---
|
|
175
|
-
|
|
176
|
-
## Browser Support
|
|
177
|
-
|
|
178
|
-
All modern browsers. Flags are served dynamically via high-quality CDNs, guaranteeing perfect rendering on Windows, Mac, iOS, and Android (bypassing Windows' lack of native flag emoji support).
|
|
179
|
-
Works flawlessly in React 17, 18, and 19.
|
|
180
|
-
|
|
181
|
-
---
|
|
182
|
-
|
|
183
|
-
## License
|
|
184
|
-
|
|
185
|
-
MIT
|
|
1
|
+
# react-phone-number-input-pro
|
|
2
|
+
> A zero-dependency React component for international phone number input with country selection, auto-formatting, and validation for 240+ countries.
|
|
3
|
+
|
|
4
|
+
[](https://www.npmjs.com/package/react-phone-number-input-pro)
|
|
5
|
+
[](https://bundlephobia.com/package/react-phone-number-input-pro)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://www.typescriptlang.org)
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- 🌍 **240+ countries** — complete dataset with dial codes and crisp SVG flags (via FlagCDN)
|
|
12
|
+
- 🔍 **Searchable dropdown** — filter by country name, code, or dial code
|
|
13
|
+
- ✅ **Per-country validation** — custom regex + length rules for every country
|
|
14
|
+
- 🎭 **Auto-format** — masks number as you type (e.g. `98765 43210`)
|
|
15
|
+
- 📋 **Paste detection** — paste `+919876543210` and it auto-selects country
|
|
16
|
+
- 🌎 **Auto-detect country** — reads browser locale on mount
|
|
17
|
+
- 🎨 **CSS variables theming** — full customization, dark mode included
|
|
18
|
+
- 🔌 **Headless hook** — `usePhoneInput()` for custom UI
|
|
19
|
+
- 📦 **Zero dependencies** — only peer deps: `react >=17`
|
|
20
|
+
- 💪 **TypeScript** — 100% typed, types shipped with package
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install react-phone-number-input-pro
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Quick Start
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { PhoneInput } from 'react-phone-number-input-pro';
|
|
36
|
+
import 'react-phone-number-input-pro/styles';
|
|
37
|
+
|
|
38
|
+
function MyForm() {
|
|
39
|
+
return (
|
|
40
|
+
<PhoneInput
|
|
41
|
+
defaultCountry="auto"
|
|
42
|
+
onChange={(value, meta) => {
|
|
43
|
+
console.log(value); // "+919876543210"
|
|
44
|
+
console.log(meta.isValid); // true
|
|
45
|
+
console.log(meta.country); // "IN"
|
|
46
|
+
}}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Props
|
|
55
|
+
|
|
56
|
+
| Prop | Type | Default | Description |
|
|
57
|
+
|---|---|---|---|
|
|
58
|
+
| `value` | `string` | — | Controlled value (full international number) |
|
|
59
|
+
| `onChange` | `(value, meta) => void` | — | Called on every change |
|
|
60
|
+
| `defaultCountry` | `string` | `"auto"` | ISO code or `"auto"` to detect from browser |
|
|
61
|
+
| `placeholder` | `string` | `"Phone number"` | Input placeholder |
|
|
62
|
+
| `disabled` | `boolean` | `false` | Disables the component |
|
|
63
|
+
| `error` | `boolean` | `false` | Forces error state (red border) |
|
|
64
|
+
| `className` | `string` | — | Extra class on wrapper |
|
|
65
|
+
| `style` | `CSSProperties` | — | Extra inline styles |
|
|
66
|
+
| `name` | `string` | — | Input `name` attribute |
|
|
67
|
+
| `id` | `string` | — | Input `id` attribute |
|
|
68
|
+
| `required` | `boolean` | — | Input `required` attribute |
|
|
69
|
+
| `onBlur` | `() => void` | — | Focus out callback |
|
|
70
|
+
| `onFocus` | `() => void` | — | Focus in callback |
|
|
71
|
+
|
|
72
|
+
### `onChange` meta object
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
interface PhoneChangeMeta {
|
|
76
|
+
country: string; // "IN"
|
|
77
|
+
dialCode: string; // "+91"
|
|
78
|
+
nationalNumber: string; // "98765 43210" (formatted)
|
|
79
|
+
rawNumber: string; // "9876543210" (digits only)
|
|
80
|
+
isValid: boolean; // true
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## Headless Hook
|
|
87
|
+
|
|
88
|
+
Build your own UI while using all the logic:
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { usePhoneInput } from 'react-phone-number-input-pro';
|
|
92
|
+
|
|
93
|
+
function CustomPhoneInput() {
|
|
94
|
+
const {
|
|
95
|
+
country,
|
|
96
|
+
setCountry,
|
|
97
|
+
nationalNumber,
|
|
98
|
+
setNationalNumber,
|
|
99
|
+
formatted,
|
|
100
|
+
fullNumber,
|
|
101
|
+
isValid,
|
|
102
|
+
error,
|
|
103
|
+
reset,
|
|
104
|
+
} = usePhoneInput({ defaultCountry: 'auto' });
|
|
105
|
+
|
|
106
|
+
return (
|
|
107
|
+
<div>
|
|
108
|
+
<span>{country.dialCode}</span>
|
|
109
|
+
<input
|
|
110
|
+
value={formatted}
|
|
111
|
+
onChange={(e) => setNationalNumber(e.target.value)}
|
|
112
|
+
/>
|
|
113
|
+
{error && <p>{error}</p>}
|
|
114
|
+
</div>
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## Theming with CSS Variables
|
|
122
|
+
|
|
123
|
+
```css
|
|
124
|
+
.my-phone-input {
|
|
125
|
+
--rpi-border-radius: 12px;
|
|
126
|
+
--rpi-border-color: #8b5cf6;
|
|
127
|
+
--rpi-border-color-focus:#7c3aed;
|
|
128
|
+
--rpi-border-color-valid: #10b981;
|
|
129
|
+
--rpi-border-color-error: #f43f5e;
|
|
130
|
+
--rpi-font-size: 1rem;
|
|
131
|
+
--rpi-height: 52px;
|
|
132
|
+
--rpi-trigger-width: 110px;
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
<PhoneInput className="my-phone-input" defaultCountry="auto" />
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Available CSS Variables
|
|
141
|
+
|
|
142
|
+
| Variable | Default | Description |
|
|
143
|
+
|---|---|---|
|
|
144
|
+
| `--rpi-font-size` | `0.9375rem` | Text size |
|
|
145
|
+
| `--rpi-height` | `46px` | Input height |
|
|
146
|
+
| `--rpi-border-color` | `#d1d5db` | Border color |
|
|
147
|
+
| `--rpi-border-color-focus` | `#6366f1` | Focus border |
|
|
148
|
+
| `--rpi-border-color-valid` | `#22c55e` | Valid border |
|
|
149
|
+
| `--rpi-border-color-error` | `#ef4444` | Error border |
|
|
150
|
+
| `--rpi-border-radius` | `10px` | Corner radius |
|
|
151
|
+
| `--rpi-bg` | `#ffffff` | Background |
|
|
152
|
+
| `--rpi-trigger-width` | `96px` | Country selector width |
|
|
153
|
+
| `--rpi-dropdown-width` | `300px` | Dropdown panel width |
|
|
154
|
+
| `--rpi-dropdown-max-height` | `300px` | Dropdown scroll height |
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Using Utilities Directly
|
|
159
|
+
|
|
160
|
+
```tsx
|
|
161
|
+
import { validatePhone, countries, getCountryByCode } from 'react-phone-number-input-pro';
|
|
162
|
+
|
|
163
|
+
// Validate a number
|
|
164
|
+
const { isValid, error } = validatePhone('9876543210', 'IN');
|
|
165
|
+
|
|
166
|
+
// Look up a country
|
|
167
|
+
const india = getCountryByCode('IN');
|
|
168
|
+
// { name: "India", code: "IN", dialCode: "+91" }
|
|
169
|
+
|
|
170
|
+
// Access the full list
|
|
171
|
+
console.log(countries.length); // 240
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
## Browser Support
|
|
177
|
+
|
|
178
|
+
All modern browsers. Flags are served dynamically via high-quality CDNs, guaranteeing perfect rendering on Windows, Mac, iOS, and Android (bypassing Windows' lack of native flag emoji support).
|
|
179
|
+
Works flawlessly in React 17, 18, and 19.
|
|
180
|
+
|
|
181
|
+
---
|
|
182
|
+
|
|
183
|
+
## License
|
|
184
|
+
|
|
185
|
+
MIT © saafir-bhimani
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-phone-number-input-pro",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "A
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "A highly customizable React component for international phone number input with built-in country detection, strict validation, and zero runtime dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"phone",
|
|
@@ -14,16 +14,16 @@
|
|
|
14
14
|
"typescript",
|
|
15
15
|
"zero-runtime-dependency"
|
|
16
16
|
],
|
|
17
|
-
"homepage": "https://github.com/
|
|
17
|
+
"homepage": "https://github.com/Saafirbhimani-154/react-phone-input-pro",
|
|
18
18
|
"bugs": {
|
|
19
|
-
"url": "https://github.com/
|
|
19
|
+
"url": "https://github.com/Saafirbhimani-154/react-phone-input-pro/issues"
|
|
20
20
|
},
|
|
21
21
|
"repository": {
|
|
22
22
|
"type": "git",
|
|
23
|
-
"url": "git+https://github.com/
|
|
23
|
+
"url": "git+https://github.com/Saafirbhimani-154/react-phone-input-pro.git"
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
|
-
"author": "
|
|
26
|
+
"author": "saafirbhimani-154",
|
|
27
27
|
"publishConfig": {
|
|
28
28
|
"access": "public"
|
|
29
29
|
},
|