published

Author: plxity

.babelrc

@@ -0,0 +1,10 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "transform-object-rest-spread",
+        "transform-react-jsx"
+    ]
+}

.gitignore

@@ -0,0 +1 @@
+/node_modules

.npmignore

@@ -0,0 +1,4 @@
+src
+demo
+.babelrc
+webpack.config.js

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#043338",
+        "titleBar.activeBackground": "#06474E",
+        "titleBar.activeForeground": "#F1FDFE"
+    }
+}

Capture.PNG

@@ -0,0 +1,84 @@
+# React Pincode
+
+[<img src="./Capture.PNG" style="width: 100%;" />](https://github.com/plxity/React-Pincode)
+
+[<img src="./Capture1.PNG" style="width: 100%;" />](https://github.com/plxity/React-Pincode)
+## Installation
+
+```
+npm install --save react-pincode
+```
+
+## Usage
+
+### Note
+This will only work for Indian Pincodes.
+
+
+The three input fields are wrapped inside an <div> Element.
+and each input field is also wrapped inside <div>. So that a user can style it according to the need in the project.
+
+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
+
+
+
+## Working
+
+```js
+import Pincode from "react-pincode";
+```
+
+### JS
+
+```js
+import React, { Component } from 'react';
+import Pincode from "react-pincode";
+
+export default class Example extends Component {
+  render() {
+    return (
+      <div>
+        <Pincode />
+      </div>
+    )
+  }
+}
+
+export default Example;
+```
+
+## Pincode Props
+
+| Name             | Description                                     |
+| ---------------- | ----------------------------------------------- |
+| Container        | Container which wraps all the three Input Field |
+| pincodeContainer | Container which wraps pincode Input Field       |
+| cityContainer    | Container which wraps City Input Field          |
+| stateContainer   | Container which wraps StateInput Field          |
+| pincodeInput     | Props for styling pincode input field           |
+| cityInput        | Props for styling city input field              |
+| stateInput       | Props for styling state input field             |
+
+## Example
+
+### JS
+
+```js
+import React, { Component } from 'react';
+import Pincode from "react-pincode";
+
+export default class Example extends Component {
+  render() {
+    return (
+      <div>
+        <Pincode  cityInput={{width:'200px'}}/>
+        // 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.
+      </div>
+    )
+  }
+}
+
+export default Example;
+```
+
+

Capture1.PNG

@@ -0,0 +1,37 @@
+{
+  "name": "react-pincode",
+  "version": "1.0.1",
+  "description": "",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "webpack"
+  },
+  "keywords": ["Pincode", "react-pincode", "Indian pincode", "react zipcode"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/plxity/React-Pincode.git"
+  },
+  "author": "plxity",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.5.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^3.0.0",
+    "path": "^0.12.7",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.6"
+  },
+  "dependencies": {
+    "@babel/preset-env": "^7.5.4",
+    "axios": "^0.19.0"
+  }
+}

README.md

@@ -0,0 +1,3 @@
+.error {
+  border: red 2.7px solid;
+}

build/index.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react";
+import axios from "axios";
+import "./App.css";
+class Pincode extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      pincode: "",
+      city: "",
+      state: ""
+    };
+  }
+  onChange(e) {
+    this.setState({ [e.target.name]: e.target.value });
+    if (e.target.value.length === 6) {
+      axios
+        .get(`https://api.postalpincode.in/pincode/${e.target.value}`)
+        .then(res =>
+          this.setState({
+            state: res.data[0].PostOffice[0].State,
+            city: res.data[0].PostOffice[0].Region
+          })
+        )
+        .then(() => {
+          document.getElementById("pincode").classList.remove("error");
+        })
+        .catch(err => {
+          document.getElementById("pincode").className = "error";
+        });
+    }
+    if (e.target.value.length < 6) {
+      this.setState({
+        city: "",
+        state: ""
+      });
+    }
+  }
+  render() {
+    return (
+      <div style={this.props.Container}>
+        <div style={this.props.pincodeContainer}>
+          <input
+            maxLength={6}
+            minLength={6}
+            onChange={e => this.onChange(e)}
+            name="pincode"
+            placeholder="Pin Code"
+            value={this.state.pincode}
+            id="pincode"
+            style={this.props.pincodeInput}
+          />
+        </div>
+        <div style={this.props.cityContainer}>
+          <input
+            type="String"
+            disabled={true}
+            placeholder="City"
+            value={this.state.city}
+            style={this.props.cityInput}
+          />
+        </div>
+        <div style={this.props.stateContainer}>
+          <input
+            type="String"
+            placeholder="State"
+            disabled={true}
+            value={this.state.state}
+            style={this.props.stateInput}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+export default Pincode;

package-lock.json

@@ -0,0 +1,62 @@
+// var path = require("path");
+
+// module.exports = {
+//   mode: "production",
+//   entry: "./src/index.jsx",
+//   output: {
+//     path: path.resolve("lib"),
+//     filename: "index.js",
+//     libraryTarget: "commonjs2"
+//   },
+//   module: {
+//     rules: [
+//       {
+//         test: /\.jsx?$/,
+//         exclude: /(node_modules)/,
+//         use: {
+//           loader: "babel-loader",
+//           options: {
+//             presets: ["@babel/preset-react"]
+//           }
+//         }
+//       },
+//       {
+//         test: /\.css$/,
+//         exclude: /node_modules/,
+//         use: ["style-loader", "css-loader"]
+//       }
+//     ]
+//   }
+// };
+var path = require("path");
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    path: path.resolve(__dirname, "build"),
+    filename: "index.js",
+    libraryTarget: "commonjs2"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.resolve(__dirname, "src"),
+        exclude: /(node_modules|bower_components|build)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-react"]
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  externals: {
+    react: "commonjs react"
+  }
+};