react-postal-code v1.2.0

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

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"

3. Pin component props.

By default,

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

Note

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

Owner

Abhinav