Skip to content

Commit 8a4331a

Browse files
bl00mberbl00mber
committed
alternative css
* replace dist to lib * add high-res flags, close bl00mber#138 * style.css * high-res.css * material.css * bootstrap.css * semantic-ui.css * plain.css
1 parent df9954b commit 8a4331a

18 files changed

+1482
-339
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
dist
1+
lib
22
.idea
33
node_modules
44
package-lock.json

‎.travis.yml

-2
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,3 @@ node_js:
33
- 'node'
44
install:
55
- npm install
6-
- npm install react@^16.9.0 --save
7-
- npm install react-dom@^16.9.0 --save

‎README.md

+35-71
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,17 @@ npm install react-phone-input-2 --save
1616
## Usage
1717
```jsx
1818
import PhoneInput from 'react-phone-input-2'
19-
import 'react-phone-input-2/dist/style.css'
19+
import 'react-phone-input-2/lib/style.css'
2020

21-
<PhoneInput country={'us'} value={this.state.phone} onChange={handleOnChange} />
21+
<PhoneInput
22+
country={'us'}
23+
value={this.state.phone}
24+
onChange={phone => this.setState({ phone })}
25+
/>
2226
```
2327

24-
```jsx
25-
handleOnChange(value) {
26-
this.setState({ phone: value })
27-
}
28-
```
28+
### [Demo 1](https://bl00mber.github.io/react-phone-input-2.html) - [Demo 2](https://bl00mber.github.io/react-phone-input-2-css.html)
29+
**available styles** - style • high-res • material • bootstrap • semantic-ui • plain
2930

3031
## Options
3132
<table>
@@ -78,7 +79,7 @@ handleOnChange(value) {
7879
</tr>
7980

8081
<tr>
81-
<td> inputExtraProps </td>
82+
<td> inputProps </td>
8283
<td> object </td>
8384
<td colspan="2"> props to pass into the input </td>
8485
</tr>
@@ -126,7 +127,7 @@ handleOnChange(value) {
126127
<td> </td>
127128
</tr>
128129
<tr>
129-
<td> enableSearchField </td>
130+
<td> enableSearch </td>
130131
<td> false </td>
131132
<td> enable search in the dropdown </td>
132133
</tr>
@@ -139,7 +140,7 @@ handleOnChange(value) {
139140

140141
```jsx
141142
<PhoneInput
142-
inputExtraProps={{
143+
inputProps={{
143144
name: 'phone',
144145
required: true,
145146
autoFocus: true
@@ -153,9 +154,9 @@ handleOnChange(value) {
153154
- [Regions](#regions)
154155
- [Localization](#predefined-localization)
155156
- [Local area codes](#local-area-codes)
156-
- [Other props](#other-props)
157-
- [Custom area codes](#custom-area-codes)
158157
- [Custom masks](#custom-masks)
158+
- [Custom area codes](#custom-area-codes)
159+
- [Other props](#other-props)
159160
- [Custom localization](#custom-localization)
160161
- [Guides](#guides)
161162
- [Phone without dialCode](#phone-without-dialcode)
@@ -260,7 +261,7 @@ Country data object not returns from onKeyDown event
260261
<tr>
261262
<td> regions </td>
262263
<td> array/string </td>
263-
<td> to only show codes from selected regions </td>
264+
<td> to show countries only from specified regions </td>
264265
</tr>
265266
</table>
266267

@@ -279,18 +280,14 @@ Country data object not returns from onKeyDown event
279280
</tr>
280281
</table>
281282

282-
Regions selected: {'europe'}
283283
```jsx
284284
<PhoneInput
285-
country='it'
285+
country='de'
286286
regions={'europe'}
287287
/>
288-
```
289288

290-
Regions selected: {['north-america', 'carribean']}
291-
```jsx
292289
<PhoneInput
293-
country='ca'
290+
country='us'
294291
regions={['north-america', 'carribean']}
295292
/>
296293
```
@@ -316,15 +313,31 @@ import es from 'react-phone-input-2/lang/es.json'
316313
/>
317314
```
318315

316+
### Custom masks
317+
```jsx
318+
<PhoneInput
319+
onlyCountries={['fr', 'at']}
320+
masks={{fr: '+.. (...) ..-..-..', at: '+.. (....) ...-....'}}
321+
/>
322+
```
323+
324+
### Custom area codes
325+
```jsx
326+
<PhoneInput
327+
onlyCountries={['gr', 'fr', 'us']}
328+
areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
329+
/>
330+
```
331+
319332
### Other props
320333
<table>
321334
<tr>
322335
<td> defaultMask </td>
323-
<td> '...... ...... ..' </td>
336+
<td> ...... ...... .. </td>
324337
</tr>
325338
<tr>
326-
<td> predecessor </td>
327-
<td> '+' </td>
339+
<td> prefix </td>
340+
<td> + </td>
328341
</tr>
329342
<tr>
330343
<td> copyNumbersOnly </td>
@@ -344,44 +357,6 @@ import es from 'react-phone-input-2/lang/es.json'
344357
</tr>
345358
</table>
346359

347-
### Custom area codes
348-
<table>
349-
<tr>
350-
<th> Name </th>
351-
<th> Type </th>
352-
</tr>
353-
<tr>
354-
<td> areaCodes </td>
355-
<td> object </td>
356-
</tr>
357-
</table>
358-
359-
```jsx
360-
<PhoneInput
361-
onlyCountries={['gr', 'fr', 'us']}
362-
areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
363-
/>
364-
```
365-
366-
### Custom masks
367-
<table>
368-
<tr>
369-
<th> Name </th>
370-
<th> Type </th>
371-
</tr>
372-
<tr>
373-
<td> masks </td>
374-
<td> object </td>
375-
</tr>
376-
</table>
377-
378-
```jsx
379-
<PhoneInput
380-
onlyCountries={['fr', 'at']}
381-
masks={{fr: '+.. (...) ..-..-..', at: '+.. (....) ...-....'}}
382-
/>
383-
```
384-
385360
### Custom localization
386361
```jsx
387362
<PhoneInput
@@ -396,17 +371,6 @@ import es from 'react-phone-input-2/lang/es.json'
396371
```
397372

398373
### Preserve countries order
399-
<table>
400-
<tr>
401-
<th> Name </th>
402-
<th> Type </th>
403-
</tr>
404-
<tr>
405-
<td> preserveOrder </td>
406-
<td> array </td>
407-
</tr>
408-
</table>
409-
410374
```jsx
411375
<PhoneInput
412376
onlyCountries={['fr', 'at']}

‎package.json

+14-10
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
"name": "react-phone-input-2",
33
"version": "2.10.1",
44
"description": "A react component to format phone numbers",
5-
"main": "dist/lib.js",
5+
"main": "lib/lib.js",
66
"scripts": {
77
"test": "jest",
8-
"start": "TARGET=dev NODE_ENV=development webpack-dev-server --progress",
9-
"build": "TARGET=build NODE_ENV=production webpack -p --progress",
10-
"start:build": "TARGET=dev NODE_ENV=development webpack-dev-server --progress",
8+
"start": "TARGET=dev:js NODE_ENV=development webpack-dev-server --progress",
9+
"start:css": "TARGET=dev:css NODE_ENV=development webpack-dev-server --progress",
10+
"build": "npm run build:js && npm run build:css",
11+
"build:js": "TARGET=build:js NODE_ENV=production webpack -p --progress",
12+
"build:css": "TARGET=build:css NODE_ENV=production webpack -p --progress && rm ./main.js",
1113
"analyze": "TARGET=analyze NODE_ENV=production webpack -p --progress"
1214
},
1315
"repository": {
@@ -30,8 +32,7 @@
3032
"files": [
3133
"LICENSE",
3234
"README.md",
33-
"dist/lib.js",
34-
"dist/style.css",
35+
"lib",
3536
"lang"
3637
],
3738
"author": "Nick Reiley <[email protected]> (https://github.com/bl00mber)",
@@ -45,7 +46,7 @@
4546
"homepage": "https://github.com/bl00mber/react-phone-input-2",
4647
"jest": {
4748
"moduleNameMapper": {
48-
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
49+
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$": "<rootDir>/test/__mocks__/fileMock.js",
4950
"\\.(css|less|stylus|scss)$": "<rootDir>/test/__mocks__/styleMock.js"
5051
},
5152
"globals": {
@@ -57,10 +58,13 @@
5758
"babel-loader": "^8.0.5",
5859
"babel-preset-react-app": "^7.0.1",
5960
"css-loader": "^2.1.0",
61+
"extract-loader": "^3.1.0",
62+
"file-loader": "^5.0.2",
6063
"jest": "^24.7.0",
6164
"less": "^3.9.0",
6265
"less-loader": "^4.1.0",
63-
"mini-css-extract-plugin": "^0.5.0",
66+
"react": "^16.12.0",
67+
"react-dom": "^16.12.0",
6468
"react-hot-loader": "^4.6.5",
6569
"react-testing-library": "^6.0.4",
6670
"style-loader": "^0.23.1",
@@ -72,8 +76,8 @@
7276
"webpack-merge": "^4.2.1"
7377
},
7478
"peerDependencies": {
75-
"react": "^16.9.0",
76-
"react-dom": "^16.9.0"
79+
"react": "^16.12.0",
80+
"react-dom": "^16.12.0"
7781
},
7882
"dependencies": {
7983
"classnames": "^2.2.6",

0 commit comments

Comments
 (0)