React Postal Code

React Postal Code is a library that can be used inside any ReactJS app. This library can be used to render Country, District & Block/City for any given Indian Pin Code. This library uses the official REST API provided by the Indian Government.

Working

import { Pin } from 'react-postal-code'

JS

import React, { useState } from 'react';
import { Pin } from 'react-postal-code'

function App() {
  const [input, setInput] = useState<string>('');
  return (
    <>
        <input type="search" onChange={(e) => setInput(e.target.value)}>
        <Pin
            pincode={input}
            showBlock={true}
            showCountry={true}
            showDistrict={true}
            // lengthValidation="Optional custom length error message"
            // errorState="Optional custom error state for no data or data error"
        />
    </>
  );
}

Playground

Codesandbox Implementation of this Library here

Pin Props

1. Props for changing CSS Styles

Name	Description	Required
_container	Container which wraps all 3 divs	Optional
_validation	Class name for Length Check	Optional
_error_state	Class Name for Error Check	Optional
_district	Class Name for District div	Optional
_block	Class Name for block div	Optional
_country	Class Name for Country div	Optional

2. Props for changing error states.

By default,

• For a Pin code less than 6 digits - "Error - Enter 6 digits"
• If a Pin code is not found/data error - "Error - No Data found"

Name	Description	Required
lengthValidation	Props for changing invalid length state	Optional
errorState	Props for changing data error state	Optional

3. Pin component props.

By default,

• showCountry - false
• showDistrict - false
• showBlock - false Turn them to true to render out these data

Name	Description	Required
pincode	Props for changing Pin Code	Required
showCountry	Props for rendering Country Name	Optional
showDistrict	Props for rendering District Name	Optional
showBlock	Props for rendering Block/City Name	Optional

Note

This will only work for Indian Postal/Pin Codes. Provide true to one of showCountry/showDistrict/showBlock props

Owner

Abhinav