react-phone-number-input-pro 1.0.0 → 1.0.1

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +185 -185
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -10,6 +10,12 @@ 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.1] - 2026-07-01
14
+
15
+ ### Fixed
16
+ - Fixed corrupted encoding of emojis and special characters in the README for the npm registry page
17
+ - Relaxed CI pipeline strictness and resolved minor internal ESLint warnings
18
+
13
19
  ## [1.0.0] - 2026-06-26
14
20
 
15
21
  ### Added
package/README.md CHANGED
@@ -1,185 +1,185 @@
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
- [![npm version](https://img.shields.io/npm/v/react-phone-number-input-pro.svg)](https://www.npmjs.com/package/react-phone-number-input-pro)
5
- [![bundle size](https://img.shields.io/bundlephobia/minzip/react-phone-number-input-pro)](https://bundlephobia.com/package/react-phone-number-input-pro)
6
- [![license](https://img.shields.io/npm/l/react-phone-number-input-pro)](LICENSE)
7
- [![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue)](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
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
+ [![npm version](https://img.shields.io/npm/v/react-phone-number-input-pro.svg)](https://www.npmjs.com/package/react-phone-number-input-pro)
5
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/react-phone-number-input-pro)](https://bundlephobia.com/package/react-phone-number-input-pro)
6
+ [![license](https://img.shields.io/npm/l/react-phone-number-input-pro)](LICENSE)
7
+ [![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue)](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.0",
4
- "description": "A zero-dependency React component for international phone number input with country selection, auto-formatting, and validation for 240+ countries.",
3
+ "version": "1.0.1",
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",