Skip to content

Commit fec9e6f

Browse files
committedJul 15, 2019
published
0 parents  commit fec9e6f

13 files changed

+6840
-0
lines changed
 

‎.babelrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react"
5+
],
6+
"plugins": [
7+
"transform-object-rest-spread",
8+
"transform-react-jsx"
9+
]
10+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules

‎.npmignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
src
2+
demo
3+
.babelrc
4+
webpack.config.js

‎.vscode/settings.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.background": "#043338",
4+
"titleBar.activeBackground": "#06474E",
5+
"titleBar.activeForeground": "#F1FDFE"
6+
}
7+
}

‎Capture.PNG

1.39 KB
Loading

‎Capture1.PNG

1.51 KB
Loading

‎README.md

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# React Pincode
2+
3+
[<img src="./Capture.PNG" style="width: 100%;" />](https://github.com/plxity/React-Pincode)
4+
5+
[<img src="./Capture1.PNG" style="width: 100%;" />](https://github.com/plxity/React-Pincode)
6+
## Installation
7+
8+
```
9+
npm install --save react-pincode
10+
```
11+
12+
## Usage
13+
14+
### Note
15+
This will only work for Indian Pincodes.
16+
17+
18+
The three input fields are wrapped inside an <div> Element.
19+
and each input field is also wrapped inside <div>. So that a user can style it according to the need in the project.
20+
21+
Whenever the wrong Pincode is entered red border appears on the pin code input field and on entering a right pin code, city and state input fields get automatically filled with correct data
22+
23+
24+
25+
## Working
26+
27+
```js
28+
import Pincode from "react-pincode";
29+
```
30+
31+
### JS
32+
33+
```js
34+
import React, { Component } from 'react';
35+
import Pincode from "react-pincode";
36+
37+
export default class Example extends Component {
38+
render() {
39+
return (
40+
<div>
41+
<Pincode />
42+
</div>
43+
)
44+
}
45+
}
46+
47+
export default Example;
48+
```
49+
50+
## Pincode Props
51+
52+
| Name | Description |
53+
| ---------------- | ----------------------------------------------- |
54+
| Container | Container which wraps all the three Input Field |
55+
| pincodeContainer | Container which wraps pincode Input Field |
56+
| cityContainer | Container which wraps City Input Field |
57+
| stateContainer | Container which wraps StateInput Field |
58+
| pincodeInput | Props for styling pincode input field |
59+
| cityInput | Props for styling city input field |
60+
| stateInput | Props for styling state input field |
61+
62+
## Example
63+
64+
### JS
65+
66+
```js
67+
import React, { Component } from 'react';
68+
import Pincode from "react-pincode";
69+
70+
export default class Example extends Component {
71+
render() {
72+
return (
73+
<div>
74+
<Pincode cityInput={{width:'200px'}}/>
75+
// This will set the length of city input field to 200px. You can play with rest of the props to style it according to your need.
76+
</div>
77+
)
78+
}
79+
}
80+
81+
export default Example;
82+
```
83+
84+

‎build/index.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

+6,548
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "react-pincode",
3+
"version": "1.0.1",
4+
"description": "",
5+
"main": "build/index.js",
6+
"scripts": {
7+
"build": "webpack"
8+
},
9+
"keywords": ["Pincode", "react-pincode", "Indian pincode", "react zipcode"],
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/plxity/React-Pincode.git"
13+
},
14+
"author": "plxity",
15+
"license": "ISC",
16+
"devDependencies": {
17+
"@babel/core": "^7.5.4",
18+
"@babel/preset-react": "^7.0.0",
19+
"babel-loader": "^8.0.6",
20+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
21+
"babel-plugin-transform-react-jsx": "^6.24.1",
22+
"babel-preset-env": "^1.7.0",
23+
"babel-preset-react": "^6.24.1",
24+
"babel-preset-stage-0": "^6.24.1",
25+
"css-loader": "^3.0.0",
26+
"path": "^0.12.7",
27+
"react": "^16.8.6",
28+
"react-dom": "^16.8.6",
29+
"style-loader": "^0.23.1",
30+
"webpack": "^4.35.3",
31+
"webpack-cli": "^3.3.6"
32+
},
33+
"dependencies": {
34+
"@babel/preset-env": "^7.5.4",
35+
"axios": "^0.19.0"
36+
}
37+
}

‎src/App.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.error {
2+
border: red 2.7px solid;
3+
}

‎src/index.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React, { Component } from "react";
2+
import axios from "axios";
3+
import "./App.css";
4+
class Pincode extends Component {
5+
constructor(props) {
6+
super(props);
7+
8+
this.state = {
9+
pincode: "",
10+
city: "",
11+
state: ""
12+
};
13+
}
14+
onChange(e) {
15+
this.setState({ [e.target.name]: e.target.value });
16+
if (e.target.value.length === 6) {
17+
axios
18+
.get(`https://api.postalpincode.in/pincode/${e.target.value}`)
19+
.then(res =>
20+
this.setState({
21+
state: res.data[0].PostOffice[0].State,
22+
city: res.data[0].PostOffice[0].Region
23+
})
24+
)
25+
.then(() => {
26+
document.getElementById("pincode").classList.remove("error");
27+
})
28+
.catch(err => {
29+
document.getElementById("pincode").className = "error";
30+
});
31+
}
32+
if (e.target.value.length < 6) {
33+
this.setState({
34+
city: "",
35+
state: ""
36+
});
37+
}
38+
}
39+
render() {
40+
return (
41+
<div style={this.props.Container}>
42+
<div style={this.props.pincodeContainer}>
43+
<input
44+
maxLength={6}
45+
minLength={6}
46+
onChange={e => this.onChange(e)}
47+
name="pincode"
48+
placeholder="Pin Code"
49+
value={this.state.pincode}
50+
id="pincode"
51+
style={this.props.pincodeInput}
52+
/>
53+
</div>
54+
<div style={this.props.cityContainer}>
55+
<input
56+
type="String"
57+
disabled={true}
58+
placeholder="City"
59+
value={this.state.city}
60+
style={this.props.cityInput}
61+
/>
62+
</div>
63+
<div style={this.props.stateContainer}>
64+
<input
65+
type="String"
66+
placeholder="State"
67+
disabled={true}
68+
value={this.state.state}
69+
style={this.props.stateInput}
70+
/>
71+
</div>
72+
</div>
73+
);
74+
}
75+
}
76+
export default Pincode;

‎webpack.config.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// var path = require("path");
2+
3+
// module.exports = {
4+
// mode: "production",
5+
// entry: "./src/index.jsx",
6+
// output: {
7+
// path: path.resolve("lib"),
8+
// filename: "index.js",
9+
// libraryTarget: "commonjs2"
10+
// },
11+
// module: {
12+
// rules: [
13+
// {
14+
// test: /\.jsx?$/,
15+
// exclude: /(node_modules)/,
16+
// use: {
17+
// loader: "babel-loader",
18+
// options: {
19+
// presets: ["@babel/preset-react"]
20+
// }
21+
// }
22+
// },
23+
// {
24+
// test: /\.css$/,
25+
// exclude: /node_modules/,
26+
// use: ["style-loader", "css-loader"]
27+
// }
28+
// ]
29+
// }
30+
// };
31+
var path = require("path");
32+
module.exports = {
33+
entry: "./src/index.js",
34+
output: {
35+
path: path.resolve(__dirname, "build"),
36+
filename: "index.js",
37+
libraryTarget: "commonjs2"
38+
},
39+
module: {
40+
rules: [
41+
{
42+
test: /\.js$/,
43+
include: path.resolve(__dirname, "src"),
44+
exclude: /(node_modules|bower_components|build)/,
45+
use: {
46+
loader: "babel-loader",
47+
options: {
48+
presets: ["@babel/preset-react"]
49+
}
50+
}
51+
},
52+
{
53+
test: /\.css$/,
54+
exclude: /node_modules/,
55+
use: ["style-loader", "css-loader"]
56+
}
57+
]
58+
},
59+
externals: {
60+
react: "commonjs react"
61+
}
62+
};

0 commit comments

Comments
 (0)
Please sign in to comment.