Skip to content

Commit 9952b89

Browse files
author
plxity
committed
an update
1 parent 56bbcfb commit 9952b89

File tree

11 files changed

+20241
-80
lines changed

11 files changed

+20241
-80
lines changed

CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ We want to make contributing to this project as easy and transparent as possible
3535
3636
Mentors will review your PR and merge if there are no conflicts found!
3737
38-
## Keep Contributing!!
38+
## Keep Contributing!

README.md

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
# React Pincode
22

3-
React Pincode is a web application which extracts the information and displays it to the user on the basis of pincode which is added by the user.
3+
React Pincode is a published NPM module that can be integrated inside any ReactJS application. It is used to extract 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 a valid Pincode is entered an error is thrown which can be customized by a user using a specific prop.
4+
5+
### Live Application - https://react-pincode.netlify.com/
46

5-
See this app live at https://react-pincode.netlify.com/
67

78
Snippet of the working application is displayed below.
89

9-
[<img src="./correct_pin.png" style="width: 100%;" />](https://github.com/plxity/React-Pincode)
10+
[<img src="./correct_pin.png" style="width: 50%;" />](https://github.com/plxity/React-Pincode)
1011

11-
[<img src="./invalid_pin.png" style="width: 100%;" />](https://github.com/plxity/React-Pincode)
12+
[<img src="./invalid_pin.png" style="width: 50%;" />](https://github.com/plxity/React-Pincode)
1213

13-
[<img src="./length_pin.png" style="width: 100%;" />](https://github.com/plxity/React-Pincode)
14+
[<img src="./length_pin.png" style="width: 50%;" />](https://github.com/plxity/React-Pincode)
1415

1516
## Table of Contents
1617
- [About](#about)
1718
- [Prerequisites](#prerequisites)
18-
- [Steps to set the environment](#steps-to-set-the-environment)
19-
- [Usage/Need](#usageneed)
2019
- [Note](#note)
2120
- [Working](#working)
2221
- [JS](#js)
@@ -28,36 +27,21 @@ Snippet of the working application is displayed below.
2827
- [Contributing](#contributing)
2928
- [Development Guidelines](#development-guidelines)
3029
- [Owner](#owner)
31-
- [Mentor](#mentor)
3230

3331

3432
## About
3533

36-
The three input fields are wrapped inside an ```<div>``` Element.
37-
and each input field is also wrapped inside ```<div>```. So that a user can style it according to the need in the project.
34+
The four 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.
3835

39-
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
36+
Whenever 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
4037

4138

4239
## Prerequisites
43-
* NodeJS (check for it's installation on terminal using npm -v)
44-
45-
## Steps to set the environment
46-
1. Clone the repository
47-
```bash
48-
git clone https://github.com/Awesome-React-Modules/React-Pincode.git
49-
```
50-
2. Install Dependencies
51-
```
52-
npm install --save react-pincode
53-
```
40+
* NodeJS (check for it's installation on terminal using ```npm -v```)
5441

55-
## Usage/Need
56-
To get instant information when the user enters just the pincode.
5742
### Note
5843
This will only work for Indian Pincodes.
5944

60-
6145
## Working
6246

6347
```js
@@ -79,27 +63,44 @@ export default class Example extends Component {
7963
)
8064
}
8165
}
82-
8366
export default Example;
8467
```
8568

86-
### PLAYGROUND
69+
### Playground
8770

8871
Find Codepen Implementation of the module [here](https://codepen.io/adityabisoi/pen/poJQXzx)
8972

9073
## Pincode Props
9174

75+
1) Props for changing CSS properties
76+
9277
| Name | Description |
9378
| ---------------- | ----------------------------------------------- |
9479
| Container | Container which wraps all the three Input Field |
9580
| pincodeContainer | Container which wraps pincode Input Field |
9681
| cityContainer | Container which wraps City Input Field |
9782
| districtContainer| Container which wraps District Input Field |
98-
| stateContainer | Container which wraps StateInput Field |
83+
| stateContainer | Container which wraps State Input Field |
9984
| pincodeInput | Props for styling pincode input field |
10085
| cityInput | Props for styling city input field |
10186
| stateInput | Props for styling state input field |
10287

88+
89+
90+
2) Props for changing error message.
91+
92+
By deafult,
93+
94+
For an Invalid Pincode - "Invalid PIN Code"
95+
If Pincode length is not valid - "ZIP code must be of 6 digits"
96+
97+
| Name | Description |
98+
| ---------------- | ----------------------------------------------- |
99+
| invalidError | Props for changing invalid error message. |
100+
| lenghtError | Props for changing invalid length message. |
101+
102+
103+
103104
## Example
104105

105106
### JS
@@ -118,7 +119,6 @@ export default class Example extends Component {
118119
)
119120
}
120121
}
121-
122122
export default Example;
123123
```
124124
### Development and Testing
@@ -132,7 +132,7 @@ export default Example;
132132
7. Congratulations! You have set-up the test server for react-pincode.
133133
Now just run `npm start` from `test-server` directory to launch the test-server.
134134
8. 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`
135-
9. To watch a video on installation :
135+
9. To watch a video on installation (Click on the thumbnail):
136136
[![Watch the video](https://img.youtube.com/vi/DtBObHLaQDA/maxresdefault.jpg)](https://www.youtube.com/watch?v=DtBObHLaQDA)
137137

138138
## Contributing
@@ -141,16 +141,9 @@ Please read [Contributing Guidelines](./CONTRIBUTING.md) for information on how
141141
## Development Guidelines
142142
1. Write clean and readable code with proper formatting.
143143
2. Create a branch and push your code in the branch.
144-
3. Please follow PR template to create PR.
144+
3. Please follow PR template to create one.
145145
4. Please read our [Code of Conduct](./CODE_OF_CONDUCT.md) .
146146

147147
## Owner
148148
[Apoorv Taneja](https://github.com/plxity)
149149

150-
## Mentor
151-
[Apoorv Taneja](https://github.com/plxity)
152-
[Tripti Shukla](https://github.com/yellowwoods12)
153-
154-
Feel Free to ask your queries!!
155-
156-
Happy Coding 🚀 🚀

build/index.js

Lines changed: 1 addition & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

correct_pin.png

6.87 KB
Loading

invalid_pin.png

4.32 KB
Loading

length_pin.png

4.04 KB
Loading

0 commit comments

Comments
 (0)