{"id":13598511,"url":"https://github.com/Awesome-React-Modules/React-Pincode","last_synced_at":"2025-04-10T09:31:26.286Z","repository":{"id":38990534,"uuid":"196519182","full_name":"Awesome-React-Modules/React-Pincode","owner":"Awesome-React-Modules","description":"A NPM module which auto fills City, District and State fields when a valid Zip Code in entered!","archived":false,"fork":false,"pushed_at":"2023-01-06T21:37:52.000Z","size":2144,"stargazers_count":29,"open_issues_count":22,"forks_count":28,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-31T04:03:36.315Z","etag":null,"topics":["axios","city","javascript","npm","npm-install","npm-module","npm-package","pincode","react-pincode","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-pincode","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Awesome-React-Modules.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-12T06:11:28.000Z","updated_at":"2023-11-18T20:13:09.000Z","dependencies_parsed_at":"2023-02-06T09:16:38.034Z","dependency_job_id":null,"html_url":"https://github.com/Awesome-React-Modules/React-Pincode","commit_stats":null,"previous_names":["plxity/react-pincode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awesome-React-Modules%2FReact-Pincode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awesome-React-Modules%2FReact-Pincode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awesome-React-Modules%2FReact-Pincode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Awesome-React-Modules%2FReact-Pincode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Awesome-React-Modules","download_url":"https://codeload.github.com/Awesome-React-Modules/React-Pincode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248191703,"owners_count":21062555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","city","javascript","npm","npm-install","npm-module","npm-package","pincode","react-pincode","reactjs"],"created_at":"2024-08-01T17:00:53.202Z","updated_at":"2025-04-10T09:31:21.257Z","avatar_url":"https://github.com/Awesome-React-Modules.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Pincode\n\nReact Pincode is a published NPM module that can be integrated inside any ReactJS application. It is used to extract Area, City, District, and State information as soon as the user enters valid Pin-Code. On entering a valid Pin-Code, a GET request is made to the Indian Postal Service API and the useful information is extracted and results are displayed in the respective fields. If an invalid Pincode is entered an error is thrown which can be customized by a user using a specific prop.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://forthebadge.com/images/badges/powered-by-responsibility.svg\" \u003e\n    \u003cimg src=\"https://forthebadge.com/images/badges/built-with-love.svg\" \u003e\n    \u003cimg src=\"https://forthebadge.com/images/badges/made-with-javascript.svg\" \u003e\n\u003c/div\u003e\n\n\n## Table of Contents\n\n- [About](#about)\n- [Prerequisites](#prerequisites)\n  - [Note](#note)\n- [Working](#working)\n  - [JS](#js)\n  - [Playground](#playground)\n- [Pincode props](#pincode-props)\n- [Example](#example)\n  - [JS](#js-1)\n  - [Development and Testing](#development-and-testing)\n- [Contributing](#contributing)\n- [Development Guidelines](#development-guidelines)\n- [Owner](#owner)\n\n## About\n\nThe four input fields are wrapped inside an `\u003cdiv\u003e` element and each input field is also wrapped inside `\u003cdiv\u003e`. So that a user can style it according to the need in the project.\n\nWhenever the wrong Pincode is entered red border appears on the pin code input field and on entering a right pin code, city, district and state input fields get automatically filled with correct data\n\n### Note\n\nThis will only work for Indian Pincodes.\n\n## Working\n\n```js\nimport Pincode from 'react-pincode';\n```\n\n### JS\n\n```js\nimport React, { useState, useEffect } from 'react';\nimport Pincode from 'react-pincode';\n\nfunction App() {\n  const [pincodeData, setPincodeData] = useState('');\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cPincode\n        invalidError=\"Please check pincode\"\n        lengthError=\"check length\"\n        getData={(data) =\u003e setPincodeData(data)}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Playground\n\nFind Codepen Implementation of the module [here](https://codesandbox.io/s/proud-waterfall-fljqj?file=/src/App.js)\n\n## Pincode Props\n\n1. Props for changing CSS properties\n\n| Name              | Description                                         |\n| ----------------- | --------------------------------------------------- |\n| Container         | Container which wraps all the three Input Field     |\n| pincodeContainer  | Container which wraps pincode Input Field           |\n| cityContainer     | Container which wraps City Input Field              |\n| districtContainer | Container which wraps District Input Field          |\n| stateContainer    | Container which wraps State Input Field             |\n| pincodeInput      | Props for styling pincode input field               |\n| cityInput         | Props for styling city input field                  |\n| stateInput        | Props for styling state input field                 |\n| showArea          | Props for displaying Area input (default: true)     |\n| showState         | Props for displaying State input (default: true)    |\n| showDistrict      | Props for displaying District input (default: true) |\n| showCity          | Props for displaying City input (default: true)     |\n\n\n\n2. Props for changing error message.\n\nBy deafult,\n\n- For an Invalid Pincode - \"Invalid PIN Code\"\n- If Pincode length is not valid - \"ZIP code must be of 6 digits\"\n\n| Name         | Description                                |\n| ------------ | ------------------------------------------ |\n| invalidError | Props for changing invalid error message.  |\n| lenghtError  | Props for changing invalid length message. |\n\n## Example\n\n### JS\n\n```js\nimport React, { Component } from 'react';\nimport Pincode from \"react-pincode\";\n\nexport default class Example extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cPincode  cityInput={{width:'200px'}}/\u003e\n        // 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.\n      \u003c/div\u003e\n    )\n  }\n}\nexport default Example;\n```\n\n### Development and Testing\n\n1. Set-up the React-Pincode module by dowloading its dependencies, using `npm install` command.\n2. Build the module using `npm run build`\n3. Link the module for testing using `npm link` command.\n4. Change your directory to `test-server` directory, using `cd test-server`\n5. Install the dependecies using `npm install`\n6. Now run `npm link react-pincode`\n7. Congratulations! You have set-up the test server for react-pincode.\n   Now just run `npm start` from `test-server` directory to launch the test-server.\n8. You don't need to stop this server, the changes made in the module will be reflected automatically each time you build them using `npm run build`\n9. To watch a video on installation (Click on the thumbnail):\n   [![Watch the video](https://img.youtube.com/vi/DtBObHLaQDA/maxresdefault.jpg)](https://www.youtube.com/watch?v=DtBObHLaQDA)\n\n## Contributing\n\nPlease read [Contributing Guidelines](./CONTRIBUTING.md) for information on how to contribute to React-Pincode.\n\n## Development Guidelines\n\n1. Write clean and readable code with proper formatting.\n2. Create a branch and push your code in the branch.\n3. Please follow PR template to create one.\n4. Please read our [Code of Conduct](./CODE_OF_CONDUCT.md) .\n\n## Owner\n\n[Apoorv Taneja](https://github.com/plxity) \u003cimg src=\"https://img.shields.io/twitter/follow/apoorv_taneja?label=Follow\u0026style=social\" /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAwesome-React-Modules%2FReact-Pincode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAwesome-React-Modules%2FReact-Pincode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAwesome-React-Modules%2FReact-Pincode/lists"}