See this app live at https://react-pincode.netlify.com/
npm install --save react-pincode
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
import Pincode from "react-pincode";
import React, { Component } from 'react';
import Pincode from "react-pincode";
export default class Example extends Component {
render() {
return (
<div>
<Pincode />
</div>
)
}
}
export default Example;
Find Codepen Implementation of the module here
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 |
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;
- Set-up the React-Pincode module by dowloading its dependencies, using
npm install
command. - Build the module using
npm run build
- Link the module for testing using
npm link
command. - Change your directory to
test-server
directory, usingcd test-server
- Install the dependecies using
npm install
- Now run
npm link react-pincode
- Congratulations! You have set-up the test server for react-pincode.
Now just run
npm start
fromtest-server
directory to launch the test-server. - 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
- To watch a video on installation :
Happy Coding ๐ ๐